RoBerto Ortega

• Intro
• From Pixels to Vectors
• From SVG To Font
• Include With CSS

Intro

Recently I ran into the challenge of turning an image that a client provided into an icon. In order to use it as an icon, I had to included as a font in the CSS.

This blog will walk through the steps and resources I used to make this font icon  from a png.

Icon



PNG

From Pixels To Vectors

The first step is to turn the png into svg. Portable Network Graphics (PNG) is a raster graphics file format. Raster images are made out of pixels. For fonts, we want vectors. Vector images are mathematical calculations from one point to another that form lines and shapes. Scalable Vector Graphics (SVG) is an XML-based vector image format.

To turn the png into svg we need a vector graphics app. The industry standard is Adobe Illustrator if you can affort it. I used the OSS Inkscape, which is awesome!

After uploading the image to the app, I followed this tutorial.

From SVG To Font

Now that you have the svg format of the image, we need to crate a font family. After little googling I found IcoMoon. It is a great app to make fonts out of svg's for free. If you use it correctly, it will generate multiple font file formats that include your icon:

• icomoon.eot
• icomoon.svg
• icomoon.ttf
• icomoon.woff

Include with CSS

The last step is to include the font into your website. First, create a font-face:

  @font-face {
    font-family: 'Logo';
    font-style: normal;
    src: url('path/to/icomoon.ttf');
  }

Apply font family rule

  .icon-logo {
    font-family: "logo";
  }

Include into HTML. The HTML symbol for the icon is defined when you crate the font with IcoMoon.

  <span class="icon-logo">&#xe900;</span>

That’s it!

Back to posts