Hi,
the import HTML functionality is wonderful ! 
I encounter a small problem, that the icons are not detected correctly
<i class="fa fa-sign-in me-1 opacity-50"></i>
are detected as italic and not as an icon (the usual use of < i > in bootstrap instead of italic)
Unfortunately, I haven’t been able to reproduce this. Could you share a bit more of the HTML that is not being parsed correctly? What component is the icon in? Thanks in advance!
He is right icons are converted to italic components with the tag set to i. If you look in the overview panel you will see that the imported and converted icons are italic components.
The converted icons shows up in the HTML panel as icons because of the classname.
hi gabby, thanks for your answer !
I’ve the problem with the OneUI theme. As It is not free, i’ll just post partial code, not to offend PixelCave.
<div class="d-flex justify-content-between align-items-center mb-4">
<div><a class="d-block d-lg-inline-block text-muted fs-sm fw-medium mb-1" href="op_auth_reminder3.html"> Mot de passe oublié ? </a></div>
<div><button class="btn btn-lg btn-alt-primary" type="submit"><i class="fa fa-sign-in me-1 opacity-50"></i>Connexion</button></div>
</div>
That is the correct way that font-awesome works:
<!-- This example uses <i> element with:
1. the `fa-solid` style class for solid style
2. the `user` icon with the `fa-` prefix -->
<i class="fa-solid fa-user"></i>
<!-- Or you can use a <span> element, with classes applied in the same way -->
<span class="fa-solid fa-user"></span>
Above code taken directly from the FA website
Just a opinion but I think Bootstrap Studio should remove the i
Italic tag from the program. Users can rely on the span tag instead ?
It seems like a complex problem to solve though, as if you choose a Bootstrap Icon, it will output as svg version anyway on export, so if you ever import the page again it becomes a svg and turned into custom code never to be able easily changed again. I do like that it becomes a svg though for future control of Bootstrap Icons being inlined and referenced on call so the problem runs deeper as to why does a svg become custom code. Well for security reasons because a svg could run javascipt (embedded in the svg) right in the Viewing screen.
Still would love to see the svg tag enabled also and somehow disable anything happening inside Bootstrap Studio on a svg tag…but that might be a impossible request do to other things like the Publish controlling etc…
Bootstrap should have never used the Italic tag to begin with…
The syntax is correct how font-awesome works
Add your code example as custom code and convert it to a component.
Then try to change the icon from the options panel to another icon.
This code will not be converted to a bootstrap svg icon
<i class="bi bi-activity"></i>
They all get converted to a italic components which means you can only change the tag from i to em and not the icon from the options panel
Now I am not sure about if they all got converted to italic. It seems that some did, others not and I can not find a rhyme or reason why ?
<i class="bi bi-arrow-up-short"></i>
Imported as a italic ?
<i class="fas fa-video"></i>
Imported as a icon
both use the
<i>
tag
or might be just svg icons sets ok…
If possible can you send us the HTML file that you are importing so we can investigate further?
Thank you for all the input guys! So basically there are a several issues that culminate in the same thing.
I sorted these issues according to how “fixable” they are. The latter two will likely remain as known limitations of the import as there is no good way to handle them.
I tried the online html converter and it seems to not recognize Bootstrap Icons but does save as a icon star…I will see if I can work with that method. @martin
If you import a HTML page with icons and import the CSS file for the icons too. In the App those icons will trigger the App’s built in icon’s css too, so when you preview,export or publish the page, you will get two the same css files for the icons
Just add the icon-star class to all the bootstrap icons before importing. They will import as a icon tag then. Much easier to edit all the pages that will need updating then having to transfer classes off a italics tag and add a icon tag. Why cant we just get a blank icon tag that we update if it is going to have to be manual editing anyway ?
On Bootstrap Icons this css seems to help a vertical align issue.
svg.bi {
vertical-align: -0.125em;
It will definately change the way one writes css targeting icons. Different Icon sets use different tags…luckily when creating css it chooses the right one.
This is true. We leave it up to the user to resolve. The same applies for duplicate bootstrap, jquery, aos etc.
@twinstream We will look into the blank icon component idea.
@martin No need to look into the blank icon idea.
This morning, I finally caught up and now understand your method of using the Bootstrap Icons font version Italic tag and the other option of svg using the Italic tag but named “Icon”. The options in the style panels are the same, one just needs to link the external css stylesheet for Bootstrap Icons if using the font version Italic tag. So no need to change 500 icons on a larger theme import as I was just missing that last step. 
which was created by me on import choosing not to import that stylesheet. My mistake.
Its always been a Italic tag from the beginning…no matter what they called it.