How do I use other font awesome icons?

Jim Bridger

When you pick an icon for a category, you can choose from a bunch of icons.

Then at the bottom, it says "For a full list of icons, please consult: FontAwesome"

But if I go to fontawesome, copy an icon name, and paste it into the icon chooser, it doesn't work, the icon is just blank.

How do I use icons not included by default?

PitaJ

@jim-bridger can you provide an example?

Jim Bridger

I'm trying to use the "palette" icon, it's not in the list provided by default, but is on the font awesome website

PitaJ

You're probably looking at FA v5 but we're using v4: https://fontawesome.com/v4.7/icons/

phenomlab

@jim-bridger I've worked around this by loading the FA5 js and CSS using a custom header. Works fine for me, but can be somewhat quirky in the sense that you need to leverage pseudonym CSS such as :before and :after with hex codes to get them to display.

dunlix

@phenomlab I believe I made a post here discussing this @Jim-Bridger the link is https://community.nodebb.org/post/82920

phenomlab

@dunlix yes, correct. My answer is also in this post

Jim Bridger

I'm not really interested in doing anything that would require editing CSS, so I will be sticking with v4. It just seemed like we were able to use more icons by pasting in the name.

I opened an issue and the link has been updated so at least the next new users who comes across this wont be completely confused.

crazycells

Hi @phenomlab ,

I am trying to change voting icons on the posts. It will be a regular thumbs-up/thumbs-down icon, but after upvoting, it will turn into solid thumbs-up or thumbs-down... For fontawesome 4, this CSS change was working fine:

span.votes {
    .far-chevron-up {
        content: "\f087";
    }

    .upvoted .fa-chevron-up:before {
        content: "\f164";
    }
}

However, in Font Awesome 5 it is not working anymore since both solid and regular thumbs up icons have the same unicode, but they are in two different classes... fas (for solid) and far (for regular)...

they both have f164 (thumbs up) and f165 (thumbs down) codes...

What would be the easiest way to implement this?

https://fontawesome.com/v5.0/icons/thumbs-down?style=regular
https://fontawesome.com/v5.0/icons/thumbs-down?style=solid

phenomlab

@crazycells it should be that you can control the switching between solid and light for example by using font-weight: 400; for light and font-weight: 900; for solid where you set the Unicode value in css.

crazycells

@phenomlab said in How do I use other font awesome icons?:

@crazycells it should be that you can control the switching between solid and light for example by using font-weight: 400; for light and font-weight: 900; for solid where you set the Unicode value in css.

Thanks a lot.
It worked with the change you said:

span.votes {
    .fa-chevron-up {
        content: "\f164";
        font-weight: 400;
    }

    .upvoted .fa-chevron-up:before {
        content: "\f164";
        font-weight: 900;
    }
}

phenomlab

@crazycells awesome. Thanks for coming back and letting me know.