Hacker News new | ask | show | jobs
by nathan-wall 3480 days 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:

<glyph 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" />

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.
1 comments
maxerickson 3480 days ago
That's more straightforward than it is easy. Easy would be:

    fa2svg f015
link
Steeeve 3480 days 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.

link
emerongi 3480 days ago
That's more simple than it is easy. Easy would be:

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