Hello 
This topic contain two theme component.
Discourse Easy SVG Icon CSS
This theme component is functional as a template, please fork it on Github or use the code to your project. You can remove the icons svg codes from the SCSS and only keep those what you really actually use… I have imported the
mixinfile to thecommon.scssfile so you can add your code below that line or separately to the desktop or mobile section.
The theme component add the ability to keep the SVG icon a maintainable and easily editable in your CSS. The component contains the all svg icons found here: discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub
How to use?
Fix parameters:
$icon-set: brands, regular, solid
$icon-name: icon name
$icon-color: icon color (currentColor, hex or color variable)
$width and $height: the size of the added icon
It looks like this:
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
Using currentColor
Here is an example to adding a solid rocket icon before the Latest navigation bar item.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
Using var(--gold) color variable
Here is an example to add a regular gold star icon before the Top navigation bar item.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(regular, star, var(--gold), 1em, 1em);
}
}
}
}
}
We can easily change the icon set, the color or even the icon too on hover etc… Let’s see!
Now we change the regular icon to solid when I hover the button.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:hover,
&:focus,
&.active {
&:before {
@include svg-icon(solid, star, currentColor, 1em, 1em);
}
}
&:before {
content: "";
@include svg-icon(regular, star, currentColor, 1em, 1em);
}
}
}
}
}
Discourse Easy Emoji CSS
mixinfile to thecommon.scssfile so you can add your code below that line or separately to the desktop or mobile section.
How to use?
The usage is similar like the SVG version.
Fix parameters:
$emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
$emoji-name: emoji name
$width and $height: the size of the added emoji
@include emoji($emoji-set, $emoji-name, $width, $height);
Here is an example to adding a facebook_messenger rocket emoji before the Latest and a twitter star emoji before the Top navigation bar item.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(facebook_messenger, rocket, 1em, 1em);
}
}
}
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(twitter, star, 1em, 1em);
}
}
}
}
}
.
