Updating Steemit logo in Font-Awesome

in steemit •  7 years ago  (edited)

In a previous post I announced that I added the Steemit logo to Font-Awesome.

I have now updated the logo in Font-Awesome which makes you able to use the logo in links like the following example

and with larger font

How to use on a web page

Clone my forked version of Font-Awesome:

$ git clone [email protected]:bhjortsberg/Font-Awesome.git

Then copy fonts and css directories to the root directory for your web site.

To the <head> section on your page add:

<link href="/css/font-awesome.min.css" rel="stylesheet">

To add a list item with the Steem logo and a link to your Steemit page like in the picture above just do:

<li>
  <a href="https://steemit.com/@<steemit-username>">
  <i class="fa fa-steemit"></i> Steemit
  </a>
</li>

Logo graphics

This time I created the logo by taking the svg data from the icon-svg__shape html element on steemit.com

<path d="M32.7004951,11.3807248 C31.1310771,9.81140963 29.3043776,8.66313021 27.3619013,7.92312792 C28.4939405,4.59311764 32.5075339,3.38104493 32.5075339,3.38104493 C32.5075339,3.38104493 23.1424826,-1.48000457 12.7997611,0.459311764 C9.35218721,1.00793415 6.0461183,3.12587173 3.62767097,5.92001831 C-1.62087426,11.9803819 -0.926213868,21.1028239 5.18422484,26.3083572 C6.1233028,27.1121528 8.22014805,28.3625014 8.2587403,28.4262947 C6.8822836,31.9221676 2.48276772,32.8790671 2.48276772,32.8790671 C2.48276772,32.8790671 8.29733255,36.5152853 16.10583,37.4594261 C18.1769471,37.7145993 20.3767051,37.7783926 22.6536475,37.5359781 C26.2684544,37.2425289 29.8703972,35.3287299 32.6104465,32.6366526 C38.5407881,26.7931863 38.5922444,17.2752258 32.7004951,11.3807248 Z M30.0247661,30.3145765 C27.8121441,32.4835487 24.5060752,33.861484 21.9589871,34.0528639 C20.1580157,34.2314851 18.2284034,34.2570024 16.3759757,34.0273465 C13.6487905,33.6956214 11.680586,32.9428604 9.75097374,32.2156168 C10.7286439,31.271476 11.7063141,29.9700926 12.1051006,28.8473305 C12.3623823,28.1838802 12.3366541,27.4438779 12.0279162,26.7931863 C9.95679906,22.5317938 10.8572848,17.4283297 14.2662664,14.1110781 C16.73617,11.6996913 20.1322875,10.5641706 23.5798614,10.9852064 C26.1140854,11.2914142 28.416756,12.4014176 30.2177274,14.2003887 C34.5915151,18.5893678 34.4371461,26.014908 30.0247661,30.3145765 Z" class="icon-svg__shape"></path>

and copied that data into Font-Awesome svg file using a text editor, opened that file in FontForge and scaled the logo to correct size.

So this logo should hopefully be identical to the official logo.

Have fun!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

There seems a small error at the top of the logo. Your version has a straight line, yet the Steemit logo is curved.

227C270D-78C1-4710-A0D4-97C672D2B1E8.jpeg

May I suggest that if you change your version, you announce it through to Utopian.io. This work deserves more visibility. :)

Ah, I see that now. I'll look into that, I probably made a mistake when scaling in FontForge.
Thanks for the input!

  ·  7 years ago (edited)

UPDATE:
I have now updated the logo according to the comment by @fknmayhem. The logo looks much better now. Thanks!