0
Welcome Guest! Login
0 items Join Now

Replace your Font Awesome with my Font Awesome

Last Post
Search Topic

  • Replace your Font Awesome with my Font Awesome

    Posted 10 months 3 weeks ago
    • I searched the forum for this and only found one old post from before Gantry 5 that indicated that it was planned to have a newer version of Font Awesome, but it was unclear in the answer to the poster's question whether he could replace the included Font Awesome with an expanded version that included thousands of icons.

      That wasn't his exact question, but it is mine. I'm coming up short in finding the graphics I'd like to use in some of the particles that use Font Awesome (I'm currently working with Orion and and Info List particle, but this could apply to other templates as well) and would like to get them from their website and replace it with the version that you provide.

      I'm not a coder, so complex coding answers won't be much help to me. But if there's a way to replace the default Font Awesome with another expanded set of icons, I'm sure a few others would like to know about it.

      Thank you,
      Ernie
    • Ernie
    #1454390
    • Karol Orzeł's Avatar
    • Karol Orzeł
    • Elite Rocketeer
    • Posts: 4787
    • Thanks: 289
    • One Crazy Dev

    Re: Replace your Font Awesome with my Font Awesome

    Posted 10 months 2 weeks ago
    • Hello Ernie,

      Thank you for your question.

      You can indeed use a newer version of Font Awesome or even the full version. However, this requires a few manual steps as Gantry 5 includes a specific version of Font Awesome and it won't automatically update to a newer or full version.

      First, download the Font Awesome kit you want to use from the Font Awesome website.

      Then, upload the downloaded files to your template's "custom" directory. If it doesn't exist, you'll need to create it. The directory structure would look like this:
      /templates/rt_template_name/custom/css/
      (for CSS files)
      /templates/rt_template_name/custom/fonts/
      (for font files)

      After uploading, you'll need to call the new CSS file in your "custom.scss" file located in the "custom" directory:
      @import url("../css/font-awesome.min.css");

      You'll also need to make sure the older Font Awesome version isn't loaded by Gantry 5. You can do that by navigating to your Gantry 5 Administrator -> Base Outline -> Page Settings tab. There, you should disable the "Enable Font Awesome 4 Compatibility" option.

      Remember, the path in the
      @import
      statement and the path where you upload the files might change depending on how the Font Awesome kit you downloaded is structured.

      As always, please be careful when making changes to your website files. Make sure to have a backup in case anything goes wrong.
    • karolorzel.com
    #1454436

  • Re: Replace your Font Awesome with my Font Awesome

    Posted 9 months 3 weeks ago
    • Sorry for the delay.

      Thank you for the detailed response, but my head is spinning a little because I'm not seeing what you're describing.

      /custom exists, but there is no /css or /fonts folder. Just config, css-compiled, images, and language.

      I downloaded the free version of FontAwesome 6.4.0 and it unzips into multiple folders. Do I want to upload the zipped file to /custom and unzip it so that all those folders (css, js, less, metadata, scss, sprites, svgs, and webfonts) are all under /custom, or under a different folder name?

      Am I creating a new file named custom.scss in the /custom directory and adding just that one line?
      @import url("../css/font-awesome.min.css");

      It sounds like it would be best to create the following path: /custom/fontawesome6 and put expand all the zipped folders from FontAwesome there so that the path to the font-awesome.min.css would be:
      @import url("fontawesome6/css/font-awesome.min.css");

      I think I get the reasoning for disabling Font Awesome on the page settings tab, but currently the drop-down shows 4 and two versions of 5. Here's what I have (Studius template):

      This image is hidden for guests.
      Please log in or register to see it.


      Would I just Disable the whole thing, or take advantage of those other fields that seem to allow me to point to somewhere else?

      Thank you,
      Ernie
    • Ernie
    #1454856
    • Karol Orzeł's Avatar
    • Karol Orzeł
    • Elite Rocketeer
    • Posts: 4787
    • Thanks: 289
    • One Crazy Dev

    Re: Replace your Font Awesome with my Font Awesome

    Posted 9 months 3 weeks ago
    • Hello Ernie,

      I'm sorry for any confusion. I'll break down the steps as clearly as I can:

      1. The
      custom
      directory is the correct place to put your FontAwesome files. However, you should ideally have a structure similar to
      custom/fontawesome6/css
      and
      custom/fontawesome6/webfonts
      for the FontAwesome files. If these folders don't exist, you can create them.

      2. You don't need to upload the zipped FontAwesome file. You only need the files inside the
      css
      and
      webfonts
      folders from the FontAwesome download. Copy the content of these two folders into your corresponding
      custom/fontawesome6/css
      and
      custom/fontawesome6/webfonts
      folders on your site.

      3. You should create a new file named
      custom.scss
      in the
      custom/css
      directory and add the import line. So, it would look something like this:
      @import url("../fontawesome6/css/all.min.css");
      Please make sure you adjust the path to match where you placed the CSS file.

      4. Regarding the Gantry settings, you would want to disable the built-in FontAwesome if you're loading your own. This is done to prevent loading FontAwesome twice, which could cause conflicts or slow down your site. So yes, you would disable it.

      Please let me know if you have any other questions!

      Best regards,
      Karol Orzeł
      RocketTheme Support
    • Last Edit: 9 months 3 weeks ago by Karol Orzeł.
    • karolorzel.com
    #1454899

  • Re: Replace your Font Awesome with my Font Awesome

    Posted 9 months 2 weeks ago
    • Thank you for the step-by-step - that got me to where I needed to be.

      Uploading only the css and webfonts folders didn't quite do the trick, so I uploaded the whole zip file and unzipped all the files to the fontawewsome6 folder.

      When I did that, the JCE Font Awesome drop-down worked properly.

      The path I set in the JCE Default Profile, Editor Parameters -> Typography was
      templates/rt_studius/custom/fontawesome6/css/all.min.css

      But I wonder if it would be better in the long run to put it in the template root directory
      templates/fontawesome6/css/all.min.css

      so that if I ever changed the template, I wouldn't have to go through this again?

      Thank you,
      Ernie
    • Ernie
    #1454955
    • Karol Orzeł's Avatar
    • Karol Orzeł
    • Elite Rocketeer
    • Posts: 4787
    • Thanks: 289
    • One Crazy Dev

    Re: Replace your Font Awesome with my Font Awesome

    Posted 9 months 2 weeks ago
    • Sure,
      Key is to remember when you have it for future reference.
    • karolorzel.com
    #1454967

Time to create page: 0.049 seconds