Updating Steemit logo in Font-Awesome

in #steemit7 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!

Sort:  

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!

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

Coin Marketplace

STEEM 0.20
TRX 0.14
JST 0.030
BTC 68147.96
ETH 3273.79
USDT 1.00
SBD 2.66