Font Awesome issues

Support Themes & Styling
1

Hey!

So I started using Grav last week and am slowly building up my site but I am having issues with some Font Awesome icons. I’ve got the Antimatter template and the Font Awesome wrapped into that is old, version 4.

I’ve tried to upgrade to the latest version from the Font Awesome website but there are still some icons, namely the Facebook, Twitter, Github, etc ones that are just displaying as square boxes or boxes with crosses.

I understand that Font Awesome has slightly changed how it references these types of icons (under the brand format) and I’ve used different reference codes to try and call up the icons but it hasn’t made a difference.

Does anyone have any pointers or know how I can troubleshoot this issue?

Many thanks,
Sarah

2

Hi Sarah,

Never used Font Awasome, but wanted to have a look anyway…

Have you seen this page about migrating Awesome 4 to 5?
Most information I used can be found at What’s in the Download? and Using Web Fonts with CSS.

Based on that info I did the following:

  • From Font Awesome download page I downloaded “Free for Web”
  • To prevent loss of changes when Antimatter gets updated, I created an inherited theme (aka child theme) using steps 1-5.
  • From the zip, I copied file css/all.min.css into user/themes/mytheme/css
  • From the zip, I copied folder webfonts into user/themes/mytheme
  • Copied file /user/themes/antimatter/templates/partials/base.html.twig into folder /user/themes/mytheme/templates/partials/ and replaced:
    {% do assets.addCss('theme://css/font-awesome.min.css', 100) %}
    with:
    {% do assets.addCss('theme://css/all.min.css', 100) %}
  • Lastly, I added the following snippets to the footer:
    <a href="//url/to/facebook"><i class="fab fa-facebook-f"></i></a>
<a href="//url/to/twitter"><i class="fab fa-twitter"></i></a>
<a href="//url/to/github"><i class="fab fa-github"></i></a>

The results looks like this:
image

Hope this helps.

6 Likes
3

Thank you @pamtbaau! That fixed the issue straight away. I think I’d be staring at it far to long to see the solution. Thanks!

4

@pamtbaau A year and a half later, and your solution still worked perfectly for me!!
Thank you!

5

On a similar note - if you ever need to use Fontawesome 5 FREE icons as pseudo element eg. ::before or ::after:

Script

<link rel="stylesheet" 
   href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
   integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
   crossorigin="anonymous">

CSS

::after { 
  content: "\f019";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
6

@tlsnine, I just updated my post:

  • To point to the new download folder of font-awesome.
  • Improved the script to add the best practice of creating an inherited theme to prevent loss of changes when antimatter gets updated.
1 Like