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

by

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';
}

More Related Contents:

  1. Transparent arrow/triangle indented over an image
  2. How to change the color of an svg element?
  3. Transparent text cut out of background
  4. SVG data image not working as a background-image in a pseudo element
  5. Font Awesome 5 shows empty square when using the JS+SVG version
  6. Invert rounded corner in CSS?
  7. Background color of text in SVG
  8. Transparent hollow or cut out circle
  9. How to resize the ClipPath area of SVG?
  10. How can I make an svg scale with its parent container?
  11. CSS :before on inline SVG
  12. Wave (or shape?) with border on CSS3
  13. Triangle shape with background image
  14. How to style icon color, size, and shadow of FontAwesome Icons
  15. How to create a curve on the top of a background?
  16. How to use Font Awesome from webjars.org with JSF
  17. How do I center an SVG in a div?
  18. SVG gradient using CSS
  19. How to change color of icons in Font Awesome 5?
  20. CSS: Using raw svg in the URL parameter of a background-image in IE
  21. Make Font Awesome icons in a circle?
  22. Add ellipses to overflowing text in SVG?
  23. Filling water animation
  24. Using Font Awesome icon for bullet points, with a single list item element
  25. LESS mixin a variable class name
  26. 3d transforms on SVG element
  27. How do you style a external svg with css
  28. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  29. Background color of tspan element
  30. Double curved shape

Leave a Comment