Use Font Awesome in Inkscape

16

4

Is there a way to convert Font Awesome icons to SVG graphics, so that I can use them in Inkscape inside other vector images?

Importing Font Awesome to Inkscape for Icon Reference does not help here, as this only refers to the font editor - but I just want to convert the font to a set of SVG graphics.

Is this possible? If so, how?

Golo Roden

Posted 2013-11-25T11:30:14.593

Reputation: 1 309

Answers

2

Russell

Posted 2013-11-25T11:30:14.593

Reputation: 136

21

I use Inkscape primarily as my primary vector editor. I'm on a mac.

As far as I can tell, there's no way to just get the vectors directly into Inkscape (you'd think opening up the svg font file would give you something but nope)

Installed the otf font (again I'm on a Mac, if on Windows try other font types if you don't like the otf). Copy in all the characters as type.

Then "outline" them in Inkscape as you would turn any font into artwork.

This is how I got the vectors in Inkscape.

To be clear: After installing the latest Font Awesome font, I open up the Font Awesome "cheatsheet" page: http://fontawesome.io/cheatsheet/

I select the FontAwesome font as my font in Inkscape

I then copy the ICON itself from the the Font Awesome cheatsheet page and paste it into Inkscape as text.

Last, just "ungroup" the text selection until it becomes a pathed object.

You can then change/tweak the vectors.

tessaract

Posted 2013-11-25T11:30:14.593

Reputation: 311

works without a problem on Ubuntu. thx for the cheatsheet link . – n3rd – 2015-04-23T05:01:05.003

On Ubuntu, just copy the .otf file to $HOME/.fonts and execute fc-cache -f -v to install the font. – Eldelshell – 2016-05-27T08:50:02.780

There is a problem of encoding when I paste it directly from the website... – 538ROMEO – 2017-09-13T12:56:11.113

4

You can use the "symbols" library, which is very useful.

You can import some icons, like font awesome.

This repository is great : https://github.com/Xaviju/inkscape-open-symbols

inkscape symbols

Drasill

Posted 2013-11-25T11:30:14.593

Reputation: 171

2I ll give you +10 if I could ! So easy fast and far better that just font awesome icon set ! Thank a lot ! – 538ROMEO – 2017-09-13T13:03:54.907

4

I've added this answer to the original post as well, adding here also:

What I've done is this: create a new inkscape file with just a simple path in it. Save and close Inkscape, open the file with a text editor. Now, open the fontawsome svg file with a text editor. Copy all the tags, paste them inside the first file, inside the tag. Search for "glyph", replace with "path". Save the file. Now, open this file Inkscape. All the glyphs have now been converted to path, but they sit on top of each other.

It took me about 5 minutes of moving and resizing (align + distribute helps a lot here) to rearrange all the icons to about a dozen of columns inside a page.

Tiberiu Ichim

Posted 2013-11-25T11:30:14.593

Reputation: 191

-1

You may explain a bit better what Font Awesome is. I suppose it exists of PNG images, probably small in size. I have converted PNG and JPEG logo's to vector images, in Illustrator. I suppose the same can be done in Inkscape. It's a lot of work, and for one reasonably sized logo this is doable although it will never be perfect. For many really small images, too much work I think.

Have you contacted the creators of these images? Maybe they have them available somewhere.

You better google for vector graphics, use Google Image search with ai, eps or svg as filetype filter, and use another set.

SPRBRN

Posted 2013-11-25T11:30:14.593

Reputation: 5 185

1Font Awesome is a font with vector icons, hence I doubt that it's made up of PNGs. – Golo Roden – 2013-11-25T12:56:39.650

1If it's a font, then you should be able to use it in Inkscape, type all necessary icons, then (in Illustrator slang) "create outline", or (in Inkscape language) "convert object to path". I don't know where or how, but that's the way I do it in Illustrator. – SPRBRN – 2013-11-25T13:01:05.280

4Shouldn't you answer questions that you can help with.. you don't even know what Font Awesome is! – Jonathan Tonge – 2013-12-11T16:52:43.867

-1

You can add it as a true-type font in Windows and then use charmap to find what you need.

C:\windows\fonts

C:\windows\system32\charmap.exe

JarrettV

Posted 2013-11-25T11:30:14.593

Reputation: 99

5How does this create SVG files? – Kevin Panko – 2014-02-11T22:29:25.667