top | item 13139023

(no title)

nathan-wall | 9 years ago

I've been converting each font awesome image I need to SVG by hand. It's actually really easy.

1. Open fontawesome-webfont.svg in a text editor.

2. Find the glyph you want to use.

3. Copy it into a new file.

4. Add boilerplate[1] to new file.

5. Change the <glyph> tag to a <path> tag.

6. Add the attribute `transform="scale(0.1,-0.1) translate(0,-1536)"`

7. Open the file in Chrome and see your SVG.

[1] boilerplate:

    <?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2">
      {glyph goes here}
    </svg>

[Example]

Starting with the following glyph:

We end with:

    <?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.2 179.2">
      <path transform="scale(0.1,-0.1) translate(0,-1536)"
        glyph-name="home"
        unicode="&#xf015;"
        horiz-adv-x="1664"
        d="M1408 544v-480q0 -26 -19 -45t-45 -19h-384v384h-256v-384h-384q-26 0 -45 19t-19 45v480q0 1 0.5 3t0.5 3l575 474l575 -474q1 -2 1 -6zM1631 613l-62 -74q-8 -9 -21 -11h-3q-13 0 -21 7l-692 577l-692 -577q-12 -8 -24 -7q-13 2 -21 11l-62 74q-8 10 -7 23.5t11 21.5 l719 599q32 26 76 26t76 -26l244 -204v195q0 14 9 23t23 9h192q14 0 23 -9t9 -23v-408l219 -182q10 -8 11 -21.5t-7 -23.5z" />
    </svg>

The `unicode` and `glyph-name` attributes can be removed.

discuss

maxerickson|9 years ago

That's more straightforward than it is easy. Easy would be:

    fa2svg f015

Steeeve|9 years ago

https://github.com/encharm/Font-Awesome-SVG-PNG

This converts the icons to either svg or png in whatever color you want, in any size you want.

emerongi|9 years ago

That's more simple than it is easy. Easy would be:

    Think "I want that glyph" and then it's just there!