Font Awesome integration not working

Hosting on Micro.blog
1

I’ve been experimenting with Font Awesome as explained in Manton’s recent video, and I’m having an issue: the selected icons are showing up on my site as squares. For example,

Albums added to [the queue](https://infinite.jetzt/2022music) on #newmusicfriday 🎵 <i class="fa-solid fa-music"></i> <i class="fa-brands fa-microblog"></i>

renders like this:

906×98 4.11 KB

I associate this with eg. characters missing from a typeface, but I thought that was what Font Awesome was designed to solve. In case it’s relevant, I do have the following in my custom CSS (though removing it didn’t seem to solve the problem):

body {
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	color: #424242;
	text-rendering: optimizeLegibility;
}

If you can spot what I’m doing wrong, or have any other tips on solving this, they’re greatly appreciated. Thanks.

2

I was seeing the same thing with Firefox and Arc, though the icons showed up just fine in Safari. I changed my icons to embedded SVG’s to get around the issue in my theme.

3

Robert, thanks for your reply — this is super-interesting, and I’ve just done the same test:

Font Awesome icon shows up perfectly fine in Safari (both macOS & iOS), but doesn’t work (is replaced with an empty square) on Arc, Chrome, & Firefox.

@manton is this working as intended, or have I broken something? (I followed the steps in your video, but maybe one of my custom theme / CSS tweaks has created a conflict?)

@frostedechoes can you point me to a resource that explains how I might be able to adopt your SVG solution?

1 Like
4

Hey Adam, the best resource I was able to find was this tutorial. I always create a class in my CSS for the SVG, and add elements to constrain the SVG icon to the right size. Something like this.

.rss {
 fill: #eee;
width: 18px;
  height: 18px;
	 display: inline;
        position: relative;
        top: 0.2em;
}

Then, you can go to Font Awesome and copy the SVG code.

Screen Shot 2022-08-31 at 4.15.29 PM

Paste that inline, then (using the example CSS above), add the class="rss" within the brackets.

If you have any issues, just shoot me an email.

5

@frostedechoes thanks so much for this explainer. I’ve managed to get this working on my site, but — given that it’s something of a pain to create (light & dark theme versions of) CSS classes for each SVG, I may wait on a response from Manton before I go ahead and do the work of implementing this site-wide.

Thanks again!

6

The site looks good. Very clean, nice color scheme.

7

I am having exactly the same issue. I was hoping to avoid the SVG approach, but that’s my next step.

Did you (or @Manton) get a solution to the original question?

8

I see the same issue (though also broken on Safari) and had to use the SVG icons.

9

Sorry, I’m very late following up on this… Turns out I had broken the CDN where we were storing Font Awesome files. I’ve updated the Font Awesome plug-in (and the Gateway plug-in) to embed the fonts directly on your blog.

You should see an Upgrade button for those plug-ins that will install the fix.

1 Like