Pinegrow Community Support Forum

Font awesome not working

I have a Bootstrap 5 page on which I´ve enabled Font Awesome 5 using the Libraries and Plugins Manager. I then added some fa-angle-double-right icons to the html. They didn´t show up so I added a style tag with a cdn to Font Awsome and they immediately showed up.

So, the question is, why did I have to add the cdn to get them to show up when they were enabled?

EDIT: I think I figured it out. After enabling it I had to click “resources” to get it to add the CDN to the file. Not sure why it didn’t add it when I clicked “Activate”.
Thanks in advance.

Hi Gregg,

Bootstrap 5?
Never used the Libraries and Plugins Manager, but Fonts always use a Fonts folder with the fonts and a CSS file with the styling of the fonts. In the CSS file are also the links to the fonts. When the paths of all font extensions in the CSS file is not the proper one to the fonts they don’t show up. You have to do this for all extensions not only the one I show you in the example. They are on top in the CSS file.

It starts like this for example:
@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
But the link can also be:
@font-face{font-family:'FontAwesome';src:url('../../fonts/fontawesome-webfont.eot?v=4.7.0');
Or:
@font-face{font-family:'FontAwesome';src:url('../../../fonts/fontawesome-webfont.eot?v=4.7.0');
Look at this part:
src:url('../../fonts/

It all depends on were you have the CSS file and the fonts.
So when you remove the CDN and try an other path for the fonts it should work. Remember to drop the fonts in the root of the site or in the fonts CSS folder. That also makes the difference in the path to the fonts of course.

Regards,

David

I wouldn’t recommend using the built-in libraries for assets like this, as they are updated by the source developers constantly. I would recommend using a CDN for development, and at the end, hard-code the final resources into your project to make them local assets. Download those direct instead of using the library manager in PG.

I would not use both local assets and CDN at the same time, as that’s going to probably cause more problems.

And Bootstrap 5 is not out yet, so we’re thinking you’re referencing v4, for clarity.