0
Welcome Guest! Login
0 items Join Now

Add Fontawesome 5 to Gantry 5

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 91279
    • Thanks: 11947
    • Web Designer/Developer

    Add Fontawesome 5 to Gantry 5

    Posted 2 years 1 month ago
    • 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":
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
      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.

      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:
      <i class="fas fa-apple-alt fa-fw fa-2x"></i>
      More info on the other classes can be found here
      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: 1 year 11 months 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.
  • Re: Add Fontawesome 5 to Gantry 5

    Posted 1 year 11 months ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 91279
    • Thanks: 11947
    • Web Designer/Developer

    Re: Add Fontawesome 5 to Gantry 5

    Posted 1 year 11 months ago
    • 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.
  • Re: Add Fontawesome 5 to Gantry 5

    Posted 1 year 11 months ago
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 91279
    • Thanks: 11947
    • Web Designer/Developer

    Re: Add Fontawesome 5 to Gantry 5

    Posted 1 year 11 months ago
    • 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.
  • Re: Add Fontawesome 5 to Gantry 5

    Posted 1 year 11 months ago
    • Thanks so much!

      S.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 91279
    • Thanks: 11947
    • Web Designer/Developer

    Re: Add Fontawesome 5 to Gantry 5

    Posted 1 year 11 months ago
    • 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.

Time to create page: 0.109 seconds