How do I include a font awesome icon in my svg?

Question

I have an svg that includes images:

<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g> 

How do I replace that line w/ a font awesome icon:

<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g> 

doesn't seem to work as the image doesn't show up.

Answer 1

i is not valid SVG. You need to include the actual character that displays the icon. If you take a look at font awesome's stylesheet you will see...

.icon-group:before                { content: "\f0c0"; } .icon-link:before                 { content: "\f0c1"; } .icon-cloud:before                { content: "\f0c2"; } .icon-beaker:before               { content: "\f0c3"; } .icon-cut:before                  { content: "\f0c4"; } .icon-copy:before                 { content: "\f0c5"; } .icon-paper-clip:before           { content: "\f0c6"; } .icon-save:before                 { content: "\f0c7"; } .icon-sign-blank:before           { content: "\f0c8"; } .icon-reorder:before              { content: "\f0c9"; } .icon-list-ul:before              { content: "\f0ca"; } .icon-list-ol:before              { content: "\f0cb"; } .icon-strikethrough:before        { content: "\f0cc"; } .icon-underline:before            { content: "\f0cd"; } .icon-table:before                { content: "\f0ce"; } 

But those are unicode characters encoded for CSS. In SVG you would need to change the syntax of example \f040 to:

<g><text x="0" y="0">&#xf040;</text></g> 

And then in your stylesheet add:

svg text {    font-family: FontAwesome; } 

According to Niek's comment, if you use the free version of Font Awesome 5+, you must use the following font-family declaration:

svg text {    font-family: 'Font Awesome 5 Free'; }