Add a custom fontawesome icon and color to your tag

ChrisBeach · July 30, 2018, 9:55am

Yes. You’ll need to substitute your image URL in here:

McBlu · April 6, 2018, 3:31pm

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.

awesomerobot · August 29, 2018, 7:17pm

FYI: we had to change tag classes due to some CSS collision issues so I’m updating the references in the topic above.

Now instead of a class it’s a data attribute.

[data-tag-name="yourtagname"] {
  // styles here
}

ChrisBeach · August 30, 2018, 5:57pm

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:

\.tag-([a-zA-Z0-9\-]*)

[data-tag-name="$1"]

TheBestPessimist · November 21, 2018, 11:10am

Pinging this as i remembered that you will update discourse to fontawesome 5. Is the CSS here supposed to change?

pmusaraj · February 19, 2019, 9:55am

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

[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;
}

A few notes about this:

You can find the SVG code for a particular icon at 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:

/// 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('<svg fill="currentColor" 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;
}

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

ChrisBeach · November 29, 2018, 10:06am

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?

pmusaraj · November 29, 2018, 2:09pm

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.

ChrisBeach · November 29, 2018, 2:10pm

Thanks - I’ll give this a try

Dax · December 24, 2018, 9:48am

@ChrisBeach please, can you update the OP with the new code when you have time?
See Custom CSS different on dekstop and mobile

Thanks

ChrisBeach · December 31, 2018, 1:36pm

@Dax, unfortunately I seem unable to edit the OP.

david · December 31, 2018, 2:10pm

I made it a wiki - you should be able to edit it now.

ChrisBeach · January 1, 2019, 6:23pm

Done.

@pmusaraj - is svg-uri() now available in core? If so I’ll delete the redundant code from the OP.

pmusaraj · January 2, 2019, 2:38pm

Yes, svg-uri() is now in core. 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; something similar for tags would be ideal. I’ll take a look at this shortly.

ChrisBeach · January 2, 2019, 3:03pm

@pmusaraj that’s great news and I’d love to see a theme component for this

cjk77 · February 18, 2019, 3:11pm

Any progress on your idea for a theme component for this feature?

pmusaraj · February 18, 2019, 3:29pm

Not yet… I will see if I can figure out something this week.

pmusaraj · February 21, 2019, 2:11pm

Good news: the theme component for custom icons next to the tag is ready: Tag icons component

AnkitJain · October 8, 2019, 10:50am

I copy pasted the same in common/css with new url and it is showing css error

Error: Invalid CSS after “…23755, ‘https”: expected expression (e.g. 1px, bold), was “://icons.iconarchiv”
on line 20 of theme_3/theme_field.scss
from line 1 of theme.scss
>> @include withImage(#823755, ‘https://icons.iconarchive.com/icons/syk
--------------------------------^

cwmke · November 21, 2019, 9:08pm

Anyone been able to get this working with the Tickets Plugin enabled? Regular tags work fine but I’m unable to get priority tags to show any color or icons.