FontAwesome Brand Icons Issue

Hello,

I am having problems embedding the fontawesome branded fonts. I am trying with facebook-messenger font, and I added it to the settings. I tried facebook-messenger, fab-facebook-messenger, fa-facebook-messenger and the icon is not being displayed. This happens for all brand icons.

All other fontawesome icons outside of the branded ones are working.

Thanks :wink:

Did you add fab-facebook-messenger to the svg icon subset setting?

Are you using the icon directly in HTML, or in JS, or a Handlebars template?

5 Likes

Hello Kris,

I added it, and I tried also all the other combinations. I tried adding the svg icon directly, using the d-icon tag which I have used many other times, and yet the image is not showing.

So you’re using handlebars then? I just tried this and was able to make the icon appear:

<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/test'>
   {{d-icon fab-facebook-messenger}}
</script>

One quick way to troubleshoot this is to directly look at the icons included in your set. If you view your site’s source and search for data-svg-sprite-path you can find the URL, it will look something like:

/svg-sprite/example.com/svg-2c88f93375363b57a37967df7eac5cc1a4166dd6.js

If you then visit that link directly you can do a quick search for fab-facebook-messenger and see if the icon is available for use. If it’s there, then the problem is with how you’re requesting the icon.

5 Likes

thank you so much! I will debug it as you suggested!

The facebook-messenger icon is in there, but it is not showing, for some reason, using the latest Discourse build. I will update once I have figured it out.

All of a sudden it started loading after I did a full Discourse rebuild. Very weird as testing in multiple browsers returned no icon! Anyhow, basically all is working fine now. I suppose it was some caching issue.