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.
<!-- 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>
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…
Thank you for all the input guys! So basically there are a several issues that culminate in the same thing.
Material Icons are not supported by the parser. We will look into adding this in our next update.
Bootstrap Studio uses the “fas” prefixed variant of Font Awesome 5 in order to be interoperable with Font Awesome 4 in the same page. Importing FA5 icons using the “fa” prefix is not supported. We will investigate if we can work around this.
The app uses the SVG variant of Bootstrap Icons. Importing the icon font version won’t work. Theoretically we could convert to the SVG version but this may break CSS that targets the i tags.
Icons that are placed in parent components that don’t accept icons in the app won’t import correctly.
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.
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 ?
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.