Using your own iconfonts
There are some awesome services for iconfonts such as:
- Entypo by Daniel Bruce (411 icons)
- EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)
- FontAwesome by Dave Gandy (v4.7.0, 675 icons)
- Foundation by ZURB, Inc. (v3.0, 283 icons)
- Ionicons by Ben Sperry (v3.0.0, 859 icons)
- MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
- MaterialCommunityIcons by MaterialDesignIcons.com (v1.7.22, 1722 icons)
- Octicons by Github, Inc. (v5.0.1, 176 icons)
- Zocial by Sam Collins (v1.0, 100 icons)
- SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)
But, what if you wanted to create your own. Or you have a designer making some slick icons but you not being able to use them as icon but inline images instead. Page load times would increase, your work load would have to increase, more typing and a big unorganised mess.
There are some online services you can use to create you or your designers can use to create and share icon fonts.
IcoMoon App: http://icomoon.io
All of these need SVGs to create your font. Your designer should be able to create SVGs fairly easily, but if not you can always automate it using ImageMagick and PoTrace.
First ImageMagick to create a bmp
convert -flatten test.png -background white -alpha remove -negate -threshold 0 -negate -resize 64x64 -crop 64x64+0+0 -gravity center -extent 64x64 test.bmp
Then potrace to trace it into an svg
potrace --svg test.bmp -o test.svg
Finally, if you want a stylesheet with your icons you should use
fontcustom compile svg
Also, iff you'd like some color in your icons, don't forget you can use Stacked Icons.
<span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger"></i> </span>
Taken from http://fontawesome.io/examples/#stacked