• Replies 8 replies
  • Subscribers 21 subscribers
  • Views 6984 views
  • Users 0 members are here
Options
Related

Custom font icon

Shent-Aurkhan (SHN)
over 5 years ago

Hye everyone, 

Could someone tell me what you use and do to have a custom font with icon instead of letters ?

Many thanks. 

  • over 5 years ago

    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. Mac and Linux users can use fontbm, which is a command-line tool that's compatible with BMFont.

    FontForge: [https://fontforge.github.io] (Windows, Mac, Linux)

    BMFont: [http://www.angelcode.com/products/bmfont/] (Windows)

    fontbm (BMFont-compatible command-line tool): [https://github.com/vladimirgamalyan/fontbm] (Windows, Mac, Linux)

    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...

    HOWTO: Convert TTF to FNT using fontbm on Mac:

    1) Install brew for mac: https://brew.sh/

    2) Install cmake for mac

    In Terminal:

    brew install cmake

    3) Download and make fontbm: https://github.com/vladimirgamalyan/fontbm

    4) Install fontbm to a folder in your path. e.g. In Terminal, from the fontbm/ folder (where you just built fontbm)

    sudo cp fontbm /usr/local/bin

    5) Use fontbm to convert TTF to FNT/PNG

    e.g.

    In Terminal, from the folder containing your TTF file:

    fontbm --font-file iconfile.ttf --output myfont --font-size 24

    This will create 2 files:

    myfont.fnt - a text file describing the font. You can edit this file manually to change things such as the mapping of characters to glpyhs.

    myfont_0.png - a PNG file with the font image data that is referenced by myfont.fnt

    In the above example, I specified the --font-size option, which defaults to 32. According to the github page:

    font size (it matches to BMFont size, when "Match char height" option in Font Settings dialog is ticked)

    For additional options to fontbm, type fontbm --help or check out the github page.

  • over 5 years ago

    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.

  • over 5 years ago

    Many 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.

  • over 5 years ago

    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"

  • over 5 years ago in reply to markdotai

    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.

  • over 5 years ago in reply to PlayItLoud

    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.

  • over 5 years ago in reply to jim_m_58

    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. 

  • over 5 years ago in reply to FlowState

    I've used many time BMfont for my customs "real" fonts, 

    instructed by the video (https://www.youtube.com/watch?v=PRQyA4BeqqE&t=4s)

    but I 've never taken care about the Channel A 

    I 've always used the default on, "outline"

    should I convert again my font with "glyph"?

    What is the difference resulted?