Giving tags FA5 icons

Product Support

AI-generated summary

Giving Tags FA5 Icons

nexo is trying to give certain tags FA5 icons after the migration to SVG icons. dax provides a reference to a meta discourse post on adding custom Font Awesome icons and colors to tags. However, nexo is having trouble finding the actual property/chunk of code responsible for the SVG icon.

After downloading an SVG icon from thenounproject.com, nexo still can’t implement it. dax suggests uploading the custom icon to the site and using the URL in the content property.

nexo is still having trouble implementing a specific FA5 icon. tshenry provides instructions on how to use svg-uri() and shares a link to the Font Awesome repository, where nexo can find the necessary code.

sam suggests making this a core feature, allowing mods to pick a Font Awesome icon or image per tag. codinghorror agrees, jokingly suggesting the use of the SUPER FROWNY FACE :frowning: for unsupported install tags.

1

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.

2

See (Superseded) Add a custom fontawesome icon and color to your tag

3

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

4

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

image
image1303×142 11 KB

5

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);
7

I’m still having trouble implementing an icon I want from FA5.

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

8

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.

9

Thank you so much Sir :smiley:

10

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

11

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!)