archive about
Clouds 23°C — Kifissia, GR — #en #farcaster #howto

The Farcaster icon font

I converted the farcaster logo to an 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 Awesome1 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 Pixelmator2, and the used Icomoon3 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

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:

π Π


  2. Pixelmator Pro is a great design tool for macOS. 

  3. Icomoon