Use FontAwesome icon in svg without external files

Question

I need to create SVG (with PHP and / or Javascript), where some SVG elements are icons from FontAwesome , but: without external dependencies (for example: importing a css file, etc.).

I found this stackoverflow question, which is similar to the topic, but not suitable for my problem, because there are external dependencies, such as adding FontAwesome (CSS files) to the web page that shows svg.

Another thing is that I need an All-in-one SVG, where all the necessary FontAwesome definition is part of svg, because the user must be able to download the generated SVG in order to continue working on it using the svg viewer or editor.

Is there a way to put the definition (for example) of one "Font Awesome" icon in one svg?

I found this (possibly) svg info list. So it looks like icon paths are available as SVG code. So who can I use this in svg?

---

// Update: I found the following example, but I don’t know how to enable the FontAwesome definition and how to access the icon: - (

<?xml version="1.0" standalone="yes"?> <svg width="100%" height="100%" version="1.1" xmlns = 'http://www.w3.org/2000/svg'> <defs> <font id="Font2" horiz-adv-x="1000"> <font-face font-family="Super Sans" font-weight="normal" font-style="italic" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="Super Sans Italic"/> </font-face-src> </font-face> <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> <glyph unicode="@"><!-- Outline of @ glyph --></glyph> <!-- more glyphs --> </font> </defs> </svg> 

Answer 1

Your example is the SVG font and it does not work in IE or Firefox. You need to encode FontAwesome as a data URI and paste as @font-face if you want it to work everywhere:

 <svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200"> <defs> <style type="text/css"> @font-face { font-family: 'FontAwesome'; src: url(data:font/opentype;base64,[...]) format('opentype'); } </style> </defs> <rect x="0" y="0" height="100" width="500" fill="#eee" /> <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32"> &#xf007 </text> </svg> 

Replace [...] with the encoded version of the base64 font. You can upload the .ttf or .otf file to the base64 service or at the openssl base64 -in <infile> -out <outfile> command line openssl base64 -in <infile> -out <outfile> .

If you want to multiply the FontAwesome library, you can go to icomoon http://icomoon.io/app/#library and add the FontAwesome library. Then select the icons you want, download zip, then upload ttf to a base64 encoding service such as http://www.opinionatedgeek.com/dotnet/tools/base64encode/ and paste the resulting line into your font-face src: declaration.