In order to easily insert little images to your websites, you should really consider using svg icons which are inserted straight into your websites font. They can be used by applying a class to certain web elements.
First you need the SVG files of your images. Make sure they have all same aspect radius and same size. I recommend using same size on Y-axis and on X-axis, something like 88x88px. Otherwise your icons may vary in size and cause hard to do styling in HTML.
There are some projects which can converts your SVG files to a font file. In this example we are going to use Font Custom. To install it on Linux (I’m using Ubuntu) follow the next steps:
|
1 2 3 4 |
sudo apt-get install fontforge eot-utils ttfautohint wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/ gem install fontcustom |
Or if you are on Mac OS X, use these:
|
1 2 3 |
brew install fontforge --with-python brew install eot-utils gem install fontcustom |
Now when you have it installed on your machine you may convert the SVG files to the font. Use this simple example to use Font Custom:
|
1 |
fontcustom compile fontfolder --name my-icons |
Just replace font folder to the one where your SVG images are and click enter. Font Custom will now create a folder my-icons and convert the SVG files to a font. There is a nice preview file also created by Font Custom.
You can use the font by browsing to the just created folder and including my-icons.css to your website.
|
1 |
<link href="my-icons.css" rel="stylesheet" type="text/css"> |
On the HTML code you can now include your custom font by writing for example:
|
1 |
<i class="icon-lightbulb"></i> |
The name is inherited from the SVG file names.
Remember that in order to control the size of the custom fonts SVG image, you need to to apply font-size, not width or height.