63

I am running twitter bootstrap3, and I am extremely happy with the new way it handles the icon as fonts. However: I need some custom icons; I need to make them myself, and ideally integrate it into the existing font. I have searched with no luck. I am well familiar with illustrator, vector graphics etc, but how to integrate?

Worst case scenario, I will make images the traditional way, but hope there is a better solution.


How do I integrate a custom glyphicon with the existing (bootstrap 3) glyphicon font?

2 Answers 2

84

This process might be one option.

You could use the IcoMoon App. Their library includes FontAwesome which would get you off to a quick start, or you download glyphicon, and upload the fontawesome-webfont.svg

For your custom icons, create SVGs, upload them to IcoMoon and add them to the FontAwesome / Glyphicon set.

When you are finished export the font set and load it as you would any icon font.

Good luck!

UPDATE

If your imported SVG file icons seem misaligned after importing into the iconmoom.app, first check how they actually look when used on a web page. It seems to me that the preview may not always be perfect. Alternatively, there is an edit icon in the iconmoon.app tool bar which lets you move and resize.

13
  • Much appreciated, David. I will give it a go, and report back. :-)
    – benteh
    Aug 24, 2013 at 18:47
  • 1
    great app.. just what we need to make our app lightweight!
    – robnardo
    Oct 7, 2013 at 15:30
  • 1
    I'm pleased this worked for you @robnardo, whenever I use IcoMoon I'm impressed how well it works as well Oct 8, 2013 at 1:34
  • 1
    @lepe, if you are refferring to the number of steps involved to make a custom font-icon, I'm starting to read more arguments for using SVGs over font-icons in some situations, eg sitepoint.com/?p=110329 Aug 20, 2015 at 1:53
  • 1
    @DavidTaiaroa: Yes, exactly. Creating icons, packing and encoding fonts, creating ":before" and ":after" css rules is overwhelming for a single task: displaying icons in a web page. I think base64 encoded SVGs files load faster and don't involve such steps. However I'm thinking there should be even a more simple way to pack all icons without such a hustle.
    – lepe
    Aug 20, 2015 at 2:50
1

If anyone is looking for an alternate tool to the one mentioned here, I've found Glyphter to be very useful. It is fairly straight forward and allows you to upload an .svg file, groom it, and add more glyphs from several other font packs. You can then download the entire bundle as its own font.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.