Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL: How To Create Your Own Icon Font/set Like Bootstrap Glyphicon
#1
This is one skill i have been with for long and i think it is time you guys learn to use/create your own icon font/set in projects, site etc. you do...
we all know bootstrap icons named "glyphicons" which the pro is about $59, many can't afford it (like me) so i do create my own icon font/set which i think is more better than glyphicon because it pleases me more cause i draw/get what i want. so lets begin..

- On your PC download this software INKSCAPE.exe

- now sketch your icon set or find icons from google images...

- now open inkscape and goto FILE » OPEN » choose any of your icons and when opened, on your keyboard press SHIFT+ALT+B and you will see a new window (for converting your icon into vector base i.e. svg) now below u will see remove background, tick it and choose live preview on the right and click on done... now close the window and click/select your icon and drag.

now u will see 2 icons, the one very clear and has no background is in vector(/svg) format.. so delete the other which is not and click on FILE» SAVE AS» .svg


do all to the rest of your icons and after that, goto
http://www.fontello.com or http://www.fontastic.me
(search on google how to use it)
what this two site does is (when u have actually uploaded your icons (in .svg format) it create a font file for them in .ttf, woff, eot etc. and also allows u to edit their name e.g to get bootstrap glyphicon home u use a span tag with class 'glyphicon glyhpicon-home' now u will be able to name yours so, use hex codes, or anything you want...
and after all u will be able to download your icon font..
done...


CONCLUSION: you can also edit your icon using your css in terms of colour, height, width anything and i assume u all know how to add a new font to your site in your css file...
I am a proud member of NIgerian Coders Team
[-] The following 1 user Likes Aaron's post:
  • Aphatheology


Possibly Related Threads...
Thread Author Replies Views Last Post
  TUTORIAL: How To Create Your Own Icon Font/set Like Bootstrap Glyphicon Aaron 0 19 10-05-2017, 01:53 PM
Last Post: Aaron
  How To Create a Cartoon With Corel Draw Dealwap 7 5,877 09-02-2017, 06:22 AM
Last Post: danjari09
  HELP: How Can I Create a Transparent Logo? Miracle Edet 10 798 06-02-2017, 10:47 AM
Last Post: Lee Palmer
  How Do I Create Animations iamdannyfc 3 249 05-20-2017, 09:11 AM
Last Post: Ahkohd
  I Need A Pc Photo Software That Will Help Me To Create Text Images. Simeon4real 4 300 11-11-2016, 05:35 PM
Last Post: Aphatheology
  HELP: How Do I Create Image Without Background In Corel Draw Miracle Edet 4 602 10-08-2016, 10:47 AM
Last Post: SmartConnect
  Exotic Icon Library For Your Designs pmabrother 4 487 06-30-2016, 08:41 PM
Last Post: Aphatheology



Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links

              Advertise