The Farcaster icon font

I wanted to use the farcaster icon, just like other app icons in my web pages.

For example, at the top of this page, you see a twitter icon. This icon is displayed by using Font Awesome¹ and then something like <i class="fa-brands fa-twitter"></i>. In this case, the icon is a font character, which means it scales with the rest of the text, it changes color with the rest of the text, and so on.

I wanted something similar for Farcaster.

So, I converted the Farcaster logo outline to SVG using Pixelmator², and the used Icomoon³ to turn it into a web font. Then, I manually cleaned up the result, and added some instructions on how to use it.

You can find the result at github.com/vrypan/fc-font.

After downloading the files, you use something like

<link rel="stylesheet" href="farcaster/style.css">

and then you can use the icon:

<i class="fc fc-farcaster"></i>
<i class="fc fc-square-farcaster"></i>

and you'll get something like this: