Custom icons using pure CSS

Share & showcase
1

Worked on this a bit today, thought I would share.

I brute-forced the addition of “custom” icons (via FontAwesome) using only CSS. Because I’m using background-image to query URLs for the icons themselves, you’ll need to be connected to the internet to get them to load. I’m sure that I could download them locally so that it could work offline, but… that’s a problem for my future self. Hope that this helps at least one person out there trying to change their icons!

Some things to note; some icons need to have minor adjustments since they don’t fit cleanly into the footprint they’re replacing. They’re noted by the background-size attributes added to them.

Gist with the code is here: https://gist.github.com/macintacos/230361c7d5fa9d9e6ff9c8f40263b931

Here is a sample screenshot of the UI after making these changes (I’ve been tweaking the great Dracula theme to my own tastes, if you’re looking for the theme I’m using):

2213×1498 420 KB

I might’ve missed some icons, so please let me know if that’s the case!

6 Likes
2

Updated the original gist to include a bunch more icons (including sidebar and some icons like the Start/Unstar that I didn’t catch yet).

3
  1. How did you blur the content on screenshot? Look amazing :slight_smile:
  2. I didn’t understand what have you done? You still need to be connected to internet to get the icon… I see no benefit in this. If you can make it directly as SVG coordinates I will not say a word, but you are just referencing SVG again online…
4

Hey Den! The blurring is from a screenshotting tool I use called CloudApp, it has a bunch of other tools to annotate screenshots quickly, highly recommended.

And yeah, I mentioned that you have to be connected to the internet to begin with - hence why I call it a “brute force” method. It was easier than getting the SVG in there directly because I just wanted to do something quick and dirty. Naturally, you mileage may vary :slight_smile: