# (Superseded) Add a custom fontawesome icon and color to your tag
**URL:** https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881
**Category:** Site Management
**Tags:** how-to
**Created:** [9. August 2017 um 15:58 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881 "2017-08-09T15:58:50Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [9. August 2017 um 15:58 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/1 "2017-08-09T15:58:50Z")
> ℹ The easiest way to do this is to use the new theme component: [Tag Icons](https://meta.discourse.org/t/tag-icons-component/109757)
**UPDATE** : _These instructions have been updated since SVG images are now used on Discourse rather than Font Awesome icons._
I’ve styled my tags with colours and SVG images:
SVG icon images can be freely downloaded from sites such as [https://thenounproject.com/](https://thenounproject.com/)
Example CSS (thanks @pmusaraj for the below):
```plaintext
@import "common/foundation/mixins";
[data-tag-name="tag1"]:link,
[data-tag-name="tag1"]:visited,
[data-tag-name="tag1"].bullet:before {
color: red;
}
[data-tag-name="tag1"].bullet:before {
background: transparent;
content: svg-uri('');
vertical-align:baseline;
}
```
Note: ensure you add the color to the SVG fill property.
This is not an ideal solution, it makes the CSS less readable. But on the other hand, it’s efficient (no additional requests) and independent (the whole icon is in the SVG path).
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [12. Oktober 2017 um 22:39 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/3 "2017-10-12T22:39:26Z")
### Author:  [@jerdog](https://meta.discourse.org/u/jerdog)
#### Post date: [24. Januar 2018 um 13:55 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/4 "2018-01-24T13:55:40Z")
Very nice! I am assuming that these go into the `Embedded CSS`?
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [10. März 2018 um 00:25 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/5 "2018-03-10T00:25:18Z")
> [@jerdog](#):
>
> I am assuming that these go into the Embedded CSS?
I put mine in “Common” CSS - unsure if that is best practice, mind you.
---
### Author:  [@McBlu](https://meta.discourse.org/u/McBlu)
#### Post date: [27. März 2018 um 21:06 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/6 "2018-03-27T21:06:59Z")
This is fantastic, Chris. Thanks.
I am using a font awesome graduation cap icon to indicated tags for assigning particular authors to generate a blog:
So, you see the graduation cap bullet point and you know the name next to it is for the person assigned to blogging that topic.
---
### Author:  [@McBlu](https://meta.discourse.org/u/McBlu)
#### Post date: [6. April 2018 um 15:14 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/7 "2018-04-06T15:14:00Z")
> [@ChrisBeach](#):
>
> @mixin withImage ($col, $image) {
> &.bullet {
> background-image: url($image);
> background-size: 16px 16px;
> background-repeat: no-repeat;
> opacity: 0.4;
> padding: 1px 0 1px 18px;
> }
> &:link, &:visited {
> color: $col;
> }
> &.bullet::before {
> display: none;
> }
> }
>
> .tag-trump {
> @include withImage(#823755, ‘[https://se23.life/uploads/default/original/2X/b/b784a22693d213ec5936051da30756c3765b06a1.png](https://se23.life/uploads/default/original/2X/b/b784a22693d213ec5936051da30756c3765b06a1.png)’);
> }
A non-coder question for clarification. Is this code for if you want to use an uploaded image (link) as the icon for a particular tag? I want to use an image I’ve uploaded for a particular tag due to fontawesome not having an appropriate image for a particular tag I am using.
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [6. April 2018 um 15:17 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/8 "2018-04-06T15:17:33Z")
> [@McBlu](#):
>
> Is this code for if you want to use an uploaded image (link) as the icon for a particular tag?
Yes. You’ll need to substitute your image URL in here:
---
### Author:  [@McBlu](https://meta.discourse.org/u/McBlu)
#### Post date: [6. April 2018 um 15:31 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/9 "2018-04-06T15:31:11Z")
Just did it. That example icon you used cracked me up. A v. tiny head in a humungous screen. Thank you so much for sharing this code.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [29. August 2018 um 19:10 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/10 "2018-08-29T19:10:23Z")
FYI: we had to change tag classes due to some CSS collision issues so I’m updating the references in the topic above.
> [@Tags with title "box" displaying as a big box](https://meta.discourse.org/t/tags-with-title-box-displaying-as-a-big-box/95779/4):
>
> I just merged in a change that will move tag names to data attributes. so now to style a tag named box you’d use this [data-tag-name="box"] { // styles here } I went with a data attribute because it reduces the possibility of future class collisions to 0.
Now instead of a class it’s a data attribute.
```CSS
[data-tag-name="yourtagname"] {
// styles here
}
```
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [30. August 2018 um 17:57 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/11 "2018-08-30T17:57:50Z")
> [@awesomerobot](#):
>
> Now instead of a class it’s a data attribute.
Thanks for explaining the change and updating the examples in this topic.
I had quite a lot of CSS to update so I used the following replacement regexp in IntelliJ:
```plaintext
\.tag-([a-zA-Z0-9\-]*)
```
```plaintext
[data-tag-name="$1"]
```
---
### Author:  [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)
#### Post date: [21. November 2018 um 11:10 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/12 "2018-11-21T11:10:57Z")
Pinging this as i remembered that you will update discourse to fontawesome 5. Is the CSS here supposed to change?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [21. November 2018 um 14:24 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/13 "2018-11-21T14:24:14Z")
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:
```plaintext
@import "common/foundation/mixins";
[data-tag-name="tag1"]:link,
[data-tag-name="tag1"]:visited,
[data-tag-name="tag1"].bullet:before {
color: red;
}
[data-tag-name="tag1"].bullet:before {
background: transparent;
content: svg-uri('');
vertical-align:baseline;
}
```
A few notes about this:
- You can find the SVG code for a particular icon at [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). And in fact, you can use any SVG icon (from other icon libraries or your own).
- Make sure you add the color to the SVG fill property.
- Note also that it uses a new mixin not yet in core called `svg-uri()` to encode the SVG for better browser support. If you want to try this now, skip the mixins import and use the code below:
```plaintext
/// Helper function to easily use an SVG inline in CSS
/// without encoding it to base64, saving bytes.
/// It also helps with browser support, especially for IE11.
///
/// @author Jakob Eriksen
/// @link http://codepen.io/jakob-e/pen/doMoML
/// @param {String} $svg - SVG image to encode
/// @return {String} - Encoded SVG data uri
@function svg-uri($svg) {
$encoded: "";
$slice: 2000;
$index: 0;
$loops: ceil(str-length($svg) / $slice);
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
$chunk: str-replace($chunk, '"', "'");
$chunk: str-replace($chunk, "<", "%3C");
$chunk: str-replace($chunk, ">", "%3E");
$chunk: str-replace($chunk, "&", "%26");
$chunk: str-replace($chunk, "#", "%23");
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url("data:image/svg+xml;charset=utf8,#{$encoded}");
}
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @link http://sassmeister.com/gist/1b4f2da5527830088e4d
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(
str-slice($string, $index + str-length($search)),
$search,
$replace
);
}
@return $string;
}
[data-tag-name="tag1"]:link,
[data-tag-name="tag1"]:visited,
[data-tag-name="tag1"].bullet:before {
color: red;
}
[data-tag-name="tag1"].bullet:before {
background: transparent;
content: svg-uri('');
vertical-align:baseline;
}
```
This is not an ideal solution, it makes the CSS less readable. But on the other hand, it’s efficient (no additional requests) and independent (the whole icon is in the SVG path).
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [29. November 2018 um 10:06 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/14 "2018-11-29T10:06:44Z")
Thanks @pmusaraj for this detailed explanation. That’s really helpful 👍
In my case there are dozens of icons and quite a lot of CSS to change. Is is possible for me to restore the fontawesome icon font on my forum? At least, as a temporary measure while I work on the SVG equivalent?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [29. November 2018 um 14:09 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/15 "2018-11-29T14:09:40Z")
You could `@import` the FontAwesome CSS file from a CDN temporarily, and see what happens. I have not tried this, but it might work. It’s possible it might also introduce duplicate icons in places where you’re overriding a previous `:before`.
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [29. November 2018 um 14:10 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/16 "2018-11-29T14:10:09Z")
Thanks - I’ll give this a try
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [24. Dezember 2018 um 09:48 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/17 "2018-12-24T09:48:54Z")
@ChrisBeach please, can you update the OP with the new code when you have time?
See [Custom CSS different on dekstop and mobile](https://meta.discourse.org/t/custom-css-different-on-dekstop-and-mobile/104984) 😉
Thanks
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [31. Dezember 2018 um 13:36 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/19 "2018-12-31T13:36:12Z")
> [@dax](#):
>
> please, can you update the OP with the new code when you have time?
@dax, unfortunately I seem unable to edit the OP.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [31. Dezember 2018 um 14:10 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/20 "2018-12-31T14:10:32Z")
I made it a wiki - you should be able to edit it now.
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [1. Januar 2019 um 18:23 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/21 "2019-01-01T18:23:50Z")
> [@david](#):
>
> you should be able to edit it now.
Done.
@pmusaraj - is `svg-uri()` now available in core? If so I’ll delete the redundant code from the OP.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2. Januar 2019 um 14:38 UTC](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/22 "2019-01-02T14:38:34Z")
Yes, `svg-uri()` is now in [core](https://github.com/discourse/discourse/blob/e8053d6e7df327310f34603ff13f56da2dc128f5/app/assets/stylesheets/common/foundation/mixins.scss#L105). That said, I would prefer to add icons to tags in a more elegant way. I recently wrote a theme component that adds [icons to categories](https://meta.discourse.org/t/category-icons-component/104683); something similar for tags would be ideal. I’ll take a look at this shortly.
[Next page](https://meta.discourse.org/t/superseded-add-a-custom-fontawesome-icon-and-color-to-your-tag/67881.md?page=2)