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?

Jaich
  • 134
  • 1
  • 11
benteh
  • 2,218
  • 4
  • 31
  • 41

2 Answers2

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.

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • Much appreciated, David. I will give it a go, and report back. :-) – benteh Aug 24 '13 at 18:47
  • 1
    great app.. just what we need to make our app lightweight! – robnardo Oct 07 '13 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 – David Taiaroa Oct 08 '13 at 01:34
  • Yea, the only thing i cannot do is import some of the Glyphicons i purchased. Any pointers on how to import each icon individually? I want to make custom woff / eot / ttf files with only some of the 470+ icons that i bought. THanks! – robnardo Oct 08 '13 at 19:46
  • @robnardo, this worked for me. You need to start with a SVG of the icon. If you don't have that, you could use a PDF version, convert it to SVG via something like http://image.online-convert.com/convert-to-svg , then use the IcoMoon App > Import Icons link. Hope this helps! – David Taiaroa Oct 09 '13 at 17:28
  • is it possible that Bootstrap is not using FontAwesome icons any more? Would it be possible to do the same with the Glyphicons font? When I import the glyphicons.svg font file to the icomoon app the icons look cropped... – ithil May 28 '14 at 08:14
  • @ithil , please see my update above. I imported the glyphicons.svg file into iconmoon.app. They looked cropped to me as well. I manually edited only a few and then tested the final result and they all look good. I'm thinking the preview isn't perfect. Here's my result: http://codepen.io/panchroma/pen/tDnzb – David Taiaroa May 30 '14 at 02:00
  • It is just me or the icon-font approach feels like a hack for something that should be handled automatically ? – lepe Aug 14 '15 at 04:28
  • 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 http://www.sitepoint.com/?p=110329 – David Taiaroa Aug 20 '15 at 01: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 '15 at 02:50
  • @DavidTaiaroa "When you are finished export the font set and load it as you would any icon font. " How do I do this? I was thrown into a project with a half-finished website and I'm having to get the hang of it as I go along. Would you mind being a bit more descriptive? What steps do I have to take to make my icon appear in the webpage? – alonso s Oct 04 '17 at 20:52
  • @alonsos, are you using Font Awesome, then the easy solution is to link to a hosted Font Awesome service, eg https://www.bootstrapcdn.com/fontawesome/ – David Taiaroa Oct 05 '17 at 23:03
  • @alonsos, if you want to create a truly custom font set then my suggestion was to use the Ico Moon App and select just the icons you need. When you are finished look for the 'font download' button at the bottom of the window. Download that, open the zip and inspect the demo files. https://www.web-font-generator.com is another useful service if you want to see more examples of how to include a self hosted fonts on a web page. Hope this helps! – David Taiaroa Oct 05 '17 at 23:24
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.

Jaich
  • 134
  • 1
  • 11
MattMakes
  • 569
  • 1
  • 5
  • 17