Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Font Awesome issues

Started by Sarah L 8 years ago · 5 replies · 3558 views

8 years ago

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

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

8 years ago Solution

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:
TWIG
```
{% do assets.addCss('theme://css/font-awesome.min.css', 100) %}
```
with:
TWIG
```
{% do assets.addCss('theme://css/all.min.css', 100) %}
```

Lastly, I added the following snippets to the footer:

HTML

<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|389x48

Hope this helps.

last edited 02/20/20 by pamtbaau

8 years ago

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!

6 years ago

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

6 years ago

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

Script

TXT

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

CSS

CSS

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

last edited 02/20/20 by pamtbaau

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

6 years ago

@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.

Topic	Replies	Views	Activity
Grav 2 + Admin2: custom page blueprint fields not showing in Admin Themes & Styling · by Pedro M, 2 months ago	4	193	2 months ago
Change page background colour Themes & Styling · by Ian, 2 months ago	3	91	2 months ago
Customizing Blog Post Layout Using "Summary Size and Separator" Themes & Styling · by Norbert, 2 years ago	11	451	3 months ago
Fork of the Knowledge Base theme Themes & Styling · by Lukáš Findeis, 3 months ago	0	45	3 months ago
Oxygen theme not working right Themes & Styling · by Sebadamus, 4 months ago	5	125	3 months ago

Suggested topics