Giving tags FA5 icons

Before the migration to SVG icons, I had used the following css code to give certain tags a FA5 icon.

.discourse-tag.tag-s-pc:not(.simple)::before, .discourse-tag.tag-featured:not(.simple)::before { content: "\f058"; }

Any idea how to make the icons work again with accordance to the SVG update? Thanks.

See Add a custom fontawesome icon and color to your tag

6 Likes

Thank you for the reference. I can’t seem to find the actual property/chunk of code that is responsible for the SVG icon?

Thanks for the reference. I went to thenounproject.com and I downloaded the SVG of an icon I’ve found, but I don’t how to implement it

So what’s up with FA5? :thinking:

If you use a custom icon (and not an entire set) just upload the icon on the site and use the URL that will be created

content: url(your-icon-url);
4 Likes

I’m still having trouble implementing an icon I want from FA5.
https://fontawesome.com/icons/check-circle?style=solid

How would you add that in the content: svg-uri('svg..) segment? Apologies for my ignorance.

Take a look at the following post and the comments that follow:

It looks like @pmusaraj is going to be working on something that will end up being exactly what you are looking for, but in the mean time he provides instructions for using svg-uri().

Edit: The Github link in the above post appears to be broken. This should be the current working link:

Font-Awesome/js-packages/@fortawesome/fontawesome-free/sprites at master · FortAwesome/Font-Awesome · GitHub

Once you’ve clicked on that link, then click on the appropriate set (solid in your case), then click the raw button and search the page for check-circle. The code below should be what you need, but I wanted to include instructions for posterity.

<path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>

The rest of the instructions are still accurate.

7 Likes

Thank you so much Sir :smiley:

1 Like

This feels to me like a very reasonable feature request for core, “allow mods to pick a font awesome icon or image per tag”, I can see it as something very useful, especially when the icon is perfect, For example a docker icon for the docker tag here

6 Likes

That is true, we can also use the SUPER FROWNY FACE :frowning: for unsupported install tag.

(Sadly and somewhat ironically the Twitter set makes this less frowny than every other emoji set. Curse you Twitter!)

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.