Font-Awesome - No Etsy icon? No problem!

Font Awesome logo

Font Awesome is a clever set of icons created Dave Gandy. I’ve found myself coming back to these so many times because they are just so versatile and easy to use!

There is huge range of icons to choose from, here’s a link to the very handy cheatsheet. If you’re not already familiar with how to use Font Awesome check out their get started page.

There is however, no Etsy icon, despite being regularly requested! So, until the Dave decides to make one, here’s a quick cheat:

In the HTML, give your icon a distinct class name. I’ve chosen “fa-etsy” to match the other font awesome icons:

1
<i class="fa fa-etsy"></i>

In the CSS, first, assign the content propety a value of ‘\0045’ - The CSS code for ‘E’.

Next, set the font-family to georgia. I found that a capital E in the font ‘Georgia’ looks very similar to the Etsy icon ‘E’. This font also has the advantage of being widely supported in browsers.

1
2
3
4
.fa-etsy:before {
content: "\0045";
font-family: georgia, serif;
}

Et voilà! You now have a working etsy icon! You can see the icon in action in my social icons.