Custom font icon

The procedure is not too different from converting a pre-existing font (e.g. TTF) to a bitmap font for use with your Garmin, except that you have to create your own custom font using something like FontForge.

This procedure uses BMFont and FontForge. FontForge is cross-platform, but BMFont is Windows-specific (although you may be able to find an alternative for Mac if you need it).

fontforge.github.io/.../

www.angelcode.com/.../

1. Download icons as SVG

In FontForge:

2. Create a new font

3. Add all your characters (import SVG files for your icons). This is the part where you will associate icons with characters -- you will probably want to pick printable characters that will be easy to type/see in your Monkey C source code.

4. Use Generate Fonts... which exports as TTF

5. Import the new font into your OS (in Windows, double-click on the TTF file)

In BMFont:

6) In Font Options,
6a) Select your font.
6b) Set size in pixels

7) In Export Options,
7a) Set Channel A to glyph.
7b) Set textures to PNG

8) Click Save Bitmap Font as...

What I did what just start with a base character set I wanted and used a font for the dimensions I wanted and used bmfont with that.  I used characters that made sense, like B would be full battery, b for an empty battery, P for phone connected, etc.

Then used paintshop and edited the .png to draw my icons.

Have some "spares" as far as characters, as you may want to add something later.  For example, I added one for LTE not long ago.

FlowStatejim_m_58Many thanks for your answer, I 've already have font forge but I didn't know how to use it, not thanks to you I do!

I used it just with copy and paste....

Furthermore I alredy use website like Icomoon.io for font icon (android app)  and SVG can be exported.

Have a goo day.

For my icon fonts, I've just been creating my own .png file using photoshop which contains images of all the icons.

Then I start with a blank .fnt file I copied from a real font and I add a line by hand for each icon I want to display - setting its position, size, offsets and advance.

E.g. this is one of my icon files:

info face="Icons" size=20 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=4 padding=0,0,0,0 spacing=1,1 outline=0
common lineHeight=20 base=0 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=0 redChnl=0 greenChnl=0 blueChnl=0
page id=0 file="icons_0.png"
chars count=27
char id=-1   x=252  y=0     width=1     height=1     xoffset=0     yoffset=15    xadvance=19    page=0  chnl=15
char id=32   x=250  y=0     width=1     height=1     xoffset=0     yoffset=15    xadvance=19    page=0  chnl=15

char id=48   x=0    y=49    width=24    height=7     xoffset=2     yoffset=5     xadvance=28    page=0  chnl=15
char id=49   x=0    y=57    width=24    height=7     xoffset=2     yoffset=5     xadvance=28    page=0  chnl=15

char id=65   x=0    y=1     width=15    height=15    xoffset=2     yoffset=1     xadvance=19    page=0  chnl=15
char id=66   x=16   y=1     width=15    height=15    xoffset=2     yoffset=1     xadvance=19    page=0  chnl=15
char id=67   x=32   y=1     width=15    height=15    xoffset=2     yoffset=1     xadvance=19    page=0  chnl=15
char id=68   x=48   y=1     width=15    height=15    xoffset=2     yoffset=1     xadvance=19    page=0  chnl=15
char id=69   x=64   y=1     width=15    height=15    xoffset=2     yoffset=1     xadvance=19    page=0  chnl=15
char id=70   x=80   y=1     width=15    height=15    xoffset=2     yoffset=1     xadvance=19    page=0  chnl=15
char id=71   x=96   y=1     width=17    height=15    xoffset=2     yoffset=1     xadvance=21    page=0  chnl=15
char id=72   x=114  y=1     width=17    height=15    xoffset=2     yoffset=1     xadvance=21    page=0  chnl=15
char id=73   x=0    y=17    width=15    height=15    xoffset=2     yoffset=1     xadvance=19    page=0  chnl=15
char id=74   x=16   y=17    width=15    height=15    xoffset=2     yoffset=1     xadvance=19    page=0  chnl=15
char id=75   x=32   y=17    width=16    height=15    xoffset=2     yoffset=1     xadvance=20    page=0  chnl=15
char id=76   x=49   y=17    width=16    height=15    xoffset=2     yoffset=1     xadvance=20    page=0  chnl=15

char id 48 == "0" and char id 65 == "A"

I’m using the same approach using gimp.   Then add a character for every symbol and set the coordinates manually.  Probably not the fastest but seems to work just fine.

On second thought, this way of doing things (along with Jim’s method) probably makes a lot more sense for most use cases, when you already have the icon in bitmap form.

Yeah, this is probably much better than starting with an SVG, as it’s simpler and allows you to reuse icons that you have already optimized/edited for small sizes.