Layering Icons with Font Awesome

I’ve been playing around with using Font Awesome for icons lately. This is pretty common knowledge stuff but that doesn’t mean I won’t forget how to do it so figured I’d best write it down.

Step 1 of course is including Font Awesome inside your head tags. Something along the lines of this:

<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

The simplest way to add an icon is just by adding a class to an empty tag:

<class="fa-solid fa-dungeon"></i>

From that code we get this:

OK but where does that code come from? You have to look it up on the Font Awesome site. Make sure you click the “Free Icons” toggle unless you’re paying for FA.

You can change the color of the icon via CSS in the same way you’d change any text color. You can change the size the same way (via font-size) OR you can add more classes:

<class="fa-solid fa-dungeon fa-lg"></i>

results in:

There are also literal sizing classes: fa-1x, fa-2x… fa-10x
You can read up on sizing icons in the official documentation.

So at long last let’s get to layering, which is the point of this blog post. Layering is my term, Font Awesome calls it stacking which is more accurate but in my brain I liken it to layers in a graphics program. Here’s their documentation on it.

And here’s an example.

This is the code behind that icon. This is 3 stacked icons: a solid circle, the RSS icon, then a hollow circle. Initially the hollow circle is the same color as the solid circle, but it changes color on hover (roll your mouse cursor over it to see what I mean). Note that you need a span or something wrapping all your layers.
<a href="https://smithtalkstech.com/feed/">
<span id="rss_icon" class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-rss-square fa-stack-1x rss-icon"></i>
<i class="fa-regular fa-circle fa-stack-2x icon-border"></i>
</span>
</a>

So what does this all mean? The first span is a container for the stacked icons. The fa-stack class is what indicates this is a container for stacked icons. If you’re interested, here is the CSS behind fa-stack:

display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: 2.5em;

fa-lg is controlling the size of the icon stack

For the first actual icon, the combination of “fa fa-circle” are the classes for a solid circle, fa-stack-2x sets this to be twice as large as the standard size (as set by the container).

The next icon replaces fa-circle with fa-rss-square, which shows the RSS icon. fa-stack-1x makes it the standard size, so half as big as the solid circle.

And finally the last icon is from a different ‘set’ of Font Awesome icons, so starts with fa-regular (instead of fa) and then fa-circle. I know this is a little confusing, but “fa fa-circle” is a solid circle, while “fa-regular fa-circle” is a hollow circle. These values all come from looking them up on the Font Awesome site. Finally fa-stack-2x makes the hollow circle twice the standard size, or the same size as the solid circle.

The icon-background, rss-icon and icon-border classes are my classes that I use in local css to set colors and so forth.

If you’re curious about the actual shapes, here’s the CSS for fa-rss-square, or more technically the before pseudo element for fa-rss-square

.fa-rss-square:before, .fa-square-rss:before {
content: "\f143";
}

So just the hex code of the character that Font Awesome uses for the RSS icon, I guess.

And that’s about as far as I’ve taken this. I’m not 100% convinced this is easier than just making some small gifs to use as icons, but I’ll admit it’s pretty convenient once you have Font Awesome installed on a site. Just look up the icon you want and paste in the classes and bam!

Changing Icon Colors in UI Kit (and SVGs in general)

For a new project I’m working on, I’m learning UI Kit; I have never done much in the way of front end development so I’m like a babe in the woods when it comes to CSS Frameworks.

Today’s challenge: Icons. UI Kit includes support for SVG icons. I needed a star on a navbar and UI Kit could give me one. Why not use it?

The UI Kit documentation says “This component injects SVGs into the site, so that they adopt color and can be styled with CSS.”  Problem is it doesn’t offer any details on this, assuming I guess that you know how to style SVGs. I didn’t.

Here’s how to insert a star icon:

<span uk-icon="icon: star"></span>

That worked but it gave me an open star  and I needed a filled star 

Seems like it should be easy enough, right? I tried assigning a color to the class and that worked on the stroke but didn’t fill the star.
In the end I inspected the hollow star (in a browser) and here’s what I found:

<span class="uk-icon" uk-icon="icon:star">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="star">
<polygon fill="none" stroke="#000" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27">
</polygon>
</svg>
</span>

OK now we know what we’re aiming at. I’d read a lot of ‘how-to’ posts on dealing with SVGs and they made it seems simple: just use fill: color like this:

.uk-icon { 
fill: yellow; 
}

That didn’t work and it turns out the <polygon> tag of the SVG was mucking things up. So to make a long story slightly less long, here’s the CSS I wound up using. For grins I’m going to give our star a black outline:

.uk-icon[uk-icon="icon:star"] svg {
    color: black;
}

.uk-icon[uk-icon="icon:star"] svg polygon{
    fill: yellow;
}

So first (.uk-icon[uk-icon=”icon:star”]) I’m making sure to target just the star icon (I could get more specific in case I need a blue star somewhere else). The first rule points at the svg and assigns the color black to the stroke (ie the outline).

The second rule goes one level deeper and targets the <polygon> tag inside the SVG, and NOW we can set the fill to yellow. And we wind up with this: So there ya have it. Now a few obvious points to address: I could’ve just gone and found a filled star gif or some other svg or used Font Awesome or something, I know. But I learned a lot by spending the time to figure this out.

Second, yeah next thing to figure out is how to align it to the text better. 🙂