Yes. You’ll need to substitute your image URL in here:
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.
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
}
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"]
Pinging this as i remembered that you will update discourse to fontawesome 5. Is the CSS here supposed to change?
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).
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?
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
.
Thanks - I’ll give this a try
@ChrisBeach please, can you update the OP with the new code when you have time?
See Custom CSS different on dekstop and mobile
Thanks
I made it a wiki - 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.
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.
Any progress on your idea for a theme component for this feature?
Not yet… I will see if I can figure out something this week.
Good news: the theme component for custom icons next to the tag is ready: Tag icons component
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
--------------------------------^
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.