• GNU/Linux Gamers

    Hello. Is there any way to add more fontawesome (or my own) icons to the forum? it says consult fontawesome for full list, but the current icons are outdated and are missing some. What can I do?

    Any help is appreciated.


  • @dunlix said in FontAwesome:

    @phenomlab how do I change it so it has a different class? for ex ample in the categories I want to change <i class="fa fa-fw fa-gem"></i> to <i class="fad fa-fw fa-gem"></i> . Notice how fa changed to fad, I want to change the icon to the duotone. is there anyway to do this with CSS or JS?

    Yes, you'd need to use the HEX value on CSS :before like the below

    .fa, .fas {
        font-family: "Font Awesome 5 Pro";
        font-weight: 400 !important;
        color: #cccccc
    }
    .fa-circle-o:before {
        content: "\f059";
    }
    

    However, FA Duotone needs a :before and :after class, so using the magnifying glass as an example, you'd need to use as below

    .fa-search:before {
        content: "\f002";
        font-family: "Font Awesome 5 Duotone";
        position: absolute;
    }
    .fa-search:after {
        content: "\10f002";
        font-family: "Font Awesome 5 Duotone";
        color: #666666;
    }
    

    Note, that the colour on the :after class is for the tone you require. You also have to use position: absolute; when using Duotone fonts.

    Here's an example of how you can get both the :before and :after HEX codes

    7a444ab1-8e69-482a-a94f-e71fa072eaab-image.png

    080f8516-2e1c-4e04-9521-c0af55a03f57-image.png

    As a final note, Duotone needs a subscription and a pro license. They aren't available under the free banner from what I recall.

    One final potential "gotcha" is that the :after class is often used (in the case of notifications and unread) to add styles (red ball with number), so you may need to get creative with the CSS classes you use, and will probably have to leverage NOT in the CSS class to ensure you make the targets unique.

    Enjoy. Let me know if you need any help.

  • Global Moderator Plugin & Theme Dev

  • GNU/Linux Gamers

    @pitaj I guess I don't have access to that link.
    17b75938-58a4-49a1-9abe-7f3395b72d8b-image.png
    That is what happens when I click it.


  • @dunlix I've done this successfully with phenomlab.com using FA 5 Pro, but theoretically, you should be able to do the same with the updated free version.

    The downside of this is that you will probably land up loading the FA CSS twice unless you overwrite the files in core

  • GNU/Linux Gamers

    @phenomlab alright, that's fine with me. How did you do it?

  • Global Moderator Plugin & Theme Dev

    @dunlix we have an older version of FA, v4. https://fontawesome.com/v4.7.0/icons/

    FA5 would break a lot of things, and has a different licensing model.

  • GNU/Linux Gamers

    @pitaj ok. is there any way I can change my site to 5 or just add individual icons?

  • GNU/Linux Gamers

    @phenomlab is there any way I can just change the font files in core on the host machine? I have access to it, and if I just switch it out with updated files wouldn't that do it?

  • GNU/Linux Gamers

    @dunlix @phenomlab @PitaJ I have got the fonts working by downloading the free web version and putting the files in the right place, then also @import-ing them in the custom css. But, the only thing I want is to be able to use the more icons that aren't available in the ACP.

    For example, I want to use the custom icons I added for a category, but there is no way to select them in the category ACP settings since custom CSS doesn't apply there.


  • @dunlix What I've done here is to import the CSS (as you've already done), then create custom CSS to change the icon being used. For example, I override many this way

    .fa, .fas {
        font-family: "Font Awesome 5 Pro";
        font-weight: 400 !important;
        color: #cccccc
    }
    .fa-circle-o:before {
        content: "\f059";
    }
    .fa-check-circle-o:before {
        content: "\f058";
    }
    .fa-bell-o:before {
        content: "\f0f3";
    }
    .fa-comment-o:before {
        content: "\f086";
    }
    .fa-circle:before {
        content: "\f111";
        font-weight: 900;
    }
    .fa-commenting-o:before {
        content: "\f086";
    }
    .fa-trash-o:before {
        content: "\f1f8";
    }
    .fa-comments-o:before {
        content: "\f086";
    }
    .fa-lightbulb-o:before {
        content: "\f749";
    }
    .fa-bell-slash-o:before {
        content: "\f1f6";
    }
    .fa-file-o:before {
        content: "\f15b";
    }
    
  • GNU/Linux Gamers

    @phenomlab So I should just change it to some icon I would never have a use for and then override that? And I can use CSS and only apply this to icons in certain elements I believe.

  • GNU/Linux Gamers

    @phenomlab how do I change it so it has a different class? for ex ample in the categories I want to change <i class="fa fa-fw fa-gem"></i> to <i class="fad fa-fw fa-gem"></i> . Notice how fa changed to fad, I want to change the icon to the duotone. is there anyway to do this with CSS or JS?


  • @dunlix said in FontAwesome:

    @phenomlab So I should just change it to some icon I would never have a use for and then override that? And I can use CSS and only apply this to icons in certain elements I believe.

    Yes, correct


  • @dunlix said in FontAwesome:

    @phenomlab how do I change it so it has a different class? for ex ample in the categories I want to change <i class="fa fa-fw fa-gem"></i> to <i class="fad fa-fw fa-gem"></i> . Notice how fa changed to fad, I want to change the icon to the duotone. is there anyway to do this with CSS or JS?

    Yes, you'd need to use the HEX value on CSS :before like the below

    .fa, .fas {
        font-family: "Font Awesome 5 Pro";
        font-weight: 400 !important;
        color: #cccccc
    }
    .fa-circle-o:before {
        content: "\f059";
    }
    

    However, FA Duotone needs a :before and :after class, so using the magnifying glass as an example, you'd need to use as below

    .fa-search:before {
        content: "\f002";
        font-family: "Font Awesome 5 Duotone";
        position: absolute;
    }
    .fa-search:after {
        content: "\10f002";
        font-family: "Font Awesome 5 Duotone";
        color: #666666;
    }
    

    Note, that the colour on the :after class is for the tone you require. You also have to use position: absolute; when using Duotone fonts.

    Here's an example of how you can get both the :before and :after HEX codes

    7a444ab1-8e69-482a-a94f-e71fa072eaab-image.png

    080f8516-2e1c-4e04-9521-c0af55a03f57-image.png

    As a final note, Duotone needs a subscription and a pro license. They aren't available under the free banner from what I recall.

    One final potential "gotcha" is that the :after class is often used (in the case of notifications and unread) to add styles (red ball with number), so you may need to get creative with the CSS classes you use, and will probably have to leverage NOT in the CSS class to ensure you make the targets unique.

    Enjoy. Let me know if you need any help.

  • GNU/Linux Gamers

    @phenomlab thank you, works great.


  • @dunlix said in FontAwesome:

    @phenomlab thank you, works great.

    Anytime. Glad to help.

Suggested Topics

| |