# Giving tags FA5 icons
**URL:** https://meta.discourse.org/t/giving-tags-fa5-icons/109407
**Category:** Support
**Created:** [17 בפברואר, 2019, 11:18pm UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407 "2019-02-17T23:18:13Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [17 בפברואר, 2019, 11:18pm UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/1 "2019-02-17T23:18:13Z")
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.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [17 בפברואר, 2019, 11:22pm UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/2 "2019-02-17T23:22:25Z")
See [(Superseded) Add a custom fontawesome icon and color to your tag](https://meta.discourse.org/t/add-a-custom-fontawesome-icon-and-color-to-your-tag/67881)
---
### Author:  [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [17 בפברואר, 2019, 11:32pm UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/3 "2019-02-17T23:32:41Z")
Thank you for the reference. I can’t seem to find the actual property/chunk of code that is responsible for the SVG icon?
---
### Author:  [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [17 בפברואר, 2019, 11:39pm UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/4 "2019-02-17T23:39:03Z")
Thanks for the reference. I went to [thenounproject.com](http://thenounproject.com) and I downloaded the SVG of an icon I’ve found, but I don’t how to implement it
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [17 בפברואר, 2019, 11:47pm UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/5 "2019-02-17T23:47:58Z")
So what’s up with FA5? 🤔
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
```plaintext
content: url(your-icon-url);
```
---
### Author:  [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [19 בפברואר, 2019, 4:27am UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/7 "2019-02-19T04:27:25Z")
I’m still having trouble implementing an icon I want from FA5.
> **[Circle Check Filled Icon (Classic Solid) — Free SVG Download | Font Awesome](https://fontawesome.com/icons/check-circle?style=solid)**
>
> 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.
---
### Author:  [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [19 בפברואר, 2019, 4:32am UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/8 "2019-02-19T04:32:29Z")
Take a look at the following post and the comments that follow:
> [@(Superseded) Add a custom fontawesome icon and color to your tag](https://meta.discourse.org/t/add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/13):
>
> 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](https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/fontawesome-free/sprites)
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.
```plaintext
```
The rest of the instructions are still accurate.
---
### Author:  [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [19 בפברואר, 2019, 7:06am UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/9 "2019-02-19T07:06:36Z")
Thank you so much Sir 😃
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [19 בפברואר, 2019, 9:41am UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/10 "2019-02-19T09:41:13Z")
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
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [19 בפברואר, 2019, 12:20pm UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/11 "2019-02-19T12:20:04Z")
That is true, we can also use the SUPER FROWNY FACE ☹ for unsupported install tag.
(Sadly and somewhat ironically the Twitter set makes this [less frowny than every other emoji set](https://emojipedia.org/white-frowning-face/). Curse you Twitter!)
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [21 במרץ, 2019, 12:20pm UTC](https://meta.discourse.org/t/giving-tags-fa5-icons/109407/12 "2019-03-21T12:20:23Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.