Imagine your boss wants you to create an application with
iconic buttons, He has an image that is to be used for menu buttons, and for
the landing page, and as an image on some pages.
You start editing the image with photoshop creating the
neccesary images. After some time you are ready. Some days later your boss
says, there has bene a feedback session with the user and they want the buttons changed, different color with gradient effect and rouneded corners, and they should be a bit larger:
Again you start up PhotoShop and change the images. And you are lucky if this is the only time the specifications change.
All this image editing could be avoided when you would use images from a
font. In a previous post I described how to create iconic buttons using
existing fonts. But it is also possible
to define your own custom font containing the images you need ( how do you
think Font Awesome is made?).
Above appearances are all images generated using CSS and only one character in a custom font ( unfortunately I am not able to load the font in this blog).
The images you see in this blog are font characters styled
with CSS. It is very easy to change the color and size of the image or the
background, just change the CSS properties.
When you have a single color image you can incorporate it in
a font. You need the image in SVG format, You can use tools like Inkscape to
convert your image to SVG.
With your images in SVG you can build a font from them using
icomoon.
It takes some time and effort to creatie a custom font. I
did not have the time nor the patience to do it so I asked my 17-year old son Michiel to do it for me. He is very good at this kind of thing (amongst others) and
he has introduced me to many interesting new developments, like AngularJS and
NodeJS. If you can use his help you can reach him here.
