Icons not appearing via code

Hi, I’m not sure if this is a limitation of BSS or i’m missing something; but I’ve got a page where i programatically create a 8x8 grid and place a series font-awesome icons into each grid square; the problem i have is that the icons don’t appear unless i place a icon onto my page first.

I’m guessing BSS rightly doesn’t include the icon-pack as it has no idea it’s actually used. Is there a cleaner way to include the correct used font-pack without having to add a dummy icon display:none to my page to trick BSS to include the icon-pack?

You can add the Font Awesome font to the page head manually, that’s what Bootstrap Studio adds when it sees a page has icons on a page. This would allow you to add your icons programmatically.

Are you using Font Awesome V4 or V5?

Because another option is you can add the icons via their SVG code, that way you can save the SVG code to apply the icons without the Font Awesome links

It doesn’t appear to, It looks to add the font-awesome into the assets folder and links to it with..

<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">

But your suggested adding it the head works better! :slight_smile:

1 Like

You can also go to the Font Awesome website and just download the SVG files of the icons you need, and import them into your Bootstrap Studio project like any other image. Then you can call them up from the assets>img folder in your code. Pretty much bullet-proof.

1 Like

BTW - BSS is already up to Font Awesome 6, and I think that version 7 is almost out.