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

documentation admins
1

:information_source: The easiest way to do this is to use the new theme component: Tag Icons

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:

24
241902×388 33.3 KB

SVG icon images can be freely downloaded from sites such as https://thenounproject.com/

Example CSS (thanks @pmusaraj for the below):

@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('<svg fill="red" xmlns="http://www.w3.org/2000/svg" width="8px" height="8px" viewBox="0 0 512 512"><path d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg>'); 
    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).

54 Likes