I made a simple template to create a symbol font for web designer.
If you want to create a FontAwesome-like font, it would help you.
Of cause, we can create a font without Adobe Illustrator, but I prefer to use Illustrator for such a purpose.
Have fun 
https://github.com/cognitom/symbols
Cool, thanks for sharing!
oh, this I could have used a week ago, but it’ll be incredibly useful in the future, thanks!
Thanks mekkablue! webfontmaker.sh is really nice!! I updated the template to work with webfontmaker.sh.
https://github.com/cognitom/symbols
I have one question.
The font created by Glyphs mini seems 20% out of the top of the box when I use it as a webfont. So, now I hack the CSS in the template like below.
s {
display:inline-block;
margin-top:-.2em;
}
Is there any suggestion to fix the glyph position? Anything is welcome.
Thank you.
can you send me the .glyphs file?
Perhaps it’s because of the unusual UPM value. It may not translate well into all webfont formats. Haven’t tried myself yet, but perhaps adding a “scale to UPM” parameter with value 1000 to the instance may remedy the problem.
Thanks for your quick reply!
UPM is 1792. I’d like to set this value to multiples of 14. (after the example of FontAwesome)
The file is here.
https://github.com/cognitom/symbols/raw/master/symbols.glyphs
Well, I’d say that’s how you designed the glyphs. Almost all of your em is above the baseline, leaving only some 14% for your descender. The usual amount is more like 20-25%. Plus, your glyphs go pretty far up. A usual amount for caps is around 70% of the em, the upper side of your boxes is at approximately 80% of the em.
I’d move all glyphs down a bit (easy with Filter > Transformations), reduce the Cap and Ascender values, and increase the Descender value.
Actually, I’m not a font designer, so I don’t know about values well… and little bit confused about “font” basics…
What I’d like to do is simple – just showing square sized icons on the web page.
These are the current settings. I’ll be so happy if you tell me your recommendation. Thank you.
What about:
Cap Height & Ascender: 1280
x-Height: 640
Descender: -512
Leave the UPM at 1792.
Copy this into your clipboard:
(
{
“Scale to UPM” = 1000;
}
)
… and paste it into the Custom Parameters field of File > Font Info > Instances > Regular.
can you post a screenshot on how it looks uncorrected and corrected?
@mekka I do not think the UPM is the problem here.
Hi guys, thanks for your mentions.
I draw a picture. Does it make sense?
http://cl.ly/image/331y0w0A472V
Where do the white background come from? Is it another font?
The white background is a just HTML element (DIV tag) like below. S tag means symbol font.
.sticker {
height:42px; width:42px;
border-radius:21px;
box-shadow:0 0 2px rgba(0,0,0,.5);
}
The div tag sit on the base line like uppercase letters. But your icons sit a bit below it. So you need to reposition them in the font to sit above the baseline or adjust the vertical position of the div.
Or draw a box character in the font with no width that you set in white color and put in with CSS just as you put in the icon. This has the advantage, that you can use any shape you like.