SOLVED Add Fontawesome 5 to Gantry 5
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
The Fontawesome 5 topic keeps coming up in the forum so I thought I'd add this little tutorial.
Gantry 5 itself does not yet support Fontawesome 5. We have an outstanding issue for it on the Gantry 5 opensource project here but it will be quite a lot of work for us to implement this properly as we have to ensure backwards compatibility, change the icon picker, allow svg use, change all the g5 admin that itself uses fontawesome, change templates, change particles, etc, etc).
In the mean time, I offer this solution that will allow you to use Fontawesome 5 (FREE or PRO version) in your own content (or anywhere you can enter HTML). I draw you attention to the topic title and the word "Add" - this solution Adds Fontawesome 5 and leaves Fontawesome 4 still working - so you can use both. You will not be able to pick Fontawesome 5 icons via the icon picker (used in Gantry 5 particles), you will only be able to use Fontawesome 5 by adding HTML.
1. Go to your Gantry 5 admin area > base outline > page settings and enter this code in the "head properties > custom content":Note the above code is taken from this page for the FREE version here - so always make sure that you are using the latest code. If you want to use the PRO version then in your fontawesome account you will set up your domainnames and be given a key and code that you can use instead of the above.<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
Then SAVE.
2. To use Fontawesome 5 you need to use the new "fas" class instead of the Fontawesome 4 "fa" like this in your HTML:More info on the other classes can be found here<i class="fas fa-apple-alt fa-fw fa-2x"></i>
3. In order to maintain fontawesome 4 working you will also need to add this one line of CSS to your custom CSS stylesheet (custom.scss)..fa { font-family: fontawesome !important; }
That's it!
Regards, Mark. - Last Edit: 6 years 1 month ago by MrT.
-
The following users have thanked you: Henning, Christian Franz, Matt, J P Sherron III, Konstantin
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Susanne Allen
- Hero Rocketeer
- Posts: 274
- Thanks: 3
-
When I tried this, it seemed to mess up some of the 4 icons that were already in place.
This...
This image is hidden for guests.
Please log in or register to see it.
became this...
This image is hidden for guests.
Please log in or register to see it.
Did I miss a step?
Susanne
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Also Please post your FTP logon, password and FTP URL in the secure area of your post.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Susanne Allen
- Hero Rocketeer
- Posts: 274
- Thanks: 3
-
Website is here other info in secure tab:
www.buysuperstud.com/
Thanks
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Should be good now - it just need one line of CSS (which I also added on base outline > page settings) in order to preserve .fa code.
Don't forget to use fa5 you have to use the new fas or fab classes.
Regards, Mark. -
The following users have thanked you: Susanne Allen
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Susanne Allen
- Hero Rocketeer
- Posts: 274
- Thanks: 3
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
No problem, glad to help
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- DUMI
- Newbie
- Posts: 6
- Thanks: 0
- A recent post shared that they followed this instruction and had to do some "finagling" with the code to make this work. The poster didn't describe what they did to get it to work. Can you provide further (or updated) description. Thanks much.
- Last Edit: 3 years 9 months ago by DUMI. Reason: typo
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
My description above works. I've no idea what "finangling" another member did, sorry.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- DUMI
- Newbie
- Posts: 6
- Thanks: 0
- I redid your instructions, and yes, I did get to work. Thanks. What I failed to do was to test within a custom HTML particle. Rather, I was trying to enter <i class="fas fa-apple-alt fa-fw fa-2x"></i> into the Icon field within the Grid Statistic particle. Is there anyway to get the Fontawesome 5 icons to work in that particle on only Custom HTML?
-
Time to create page: 0.062 seconds