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.

Take a look at the following post and the comments that follow: [image] (Superseded) Add a custom fontawesome icon and color to your tag Site Management Thanks for bumping this, with FontAwesome 5 the technique in the OP will no longer work. Our FA5 implementation switches from using an icon font to SVGs, so the content: "\f0a1" will no longer display an icon, the font where that character points will no longer be included. Here is a way to do the same thing with SVGs once FA5 is in core: @import "common/foundation/mixins"; [data-tag-name="tag1"]:link, [data-tag-name="tag1"]:visited, [data-tag-name="tag1"].bullet:before { color: red; } [… 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. The rest of the instructions are still accurate.

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

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 [image]

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

I’m still having trouble implementing an icon I want from FA5. [image] Circle Check Filled Icon (Classic Solid) — Free SVG Download | Font Awesome Download the Circle Check filled icon as a free SVG or PNG. A bold Classic Solid style icon for web and app projects. How would you add that in the content: svg-uri('svg..) segment? Apologies for my ignorance.

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

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

Giving tags FA5 icons

Product Support

nexo February 19, 2019, 7:06am 9

Thank you so much Sir

Topic		Replies	Views
Use Font-Awesome 4 icons in theme but keep FA5? Development	16	2822	June 18, 2019
Issue using custom icon with Tag Icons Product Support tag-icons	2	451	December 19, 2019
Introducing Font Awesome 5 and SVG icons Announcements new-feature	131	45210	December 1, 2023
How do I re-implement my missing FA icons? Product Support	3	3588	December 12, 2018
Using Font Awesome 5 icon in JS Development	1	708	February 9, 2019

Giving tags FA5 icons

Related topics