Replace font awesome icon with an svg

Question

I want to replace a font-awesome icon with and svg.

For example, if the css class is class="'fa fa-square'" , how can it be changed in order to use an svg file with the same shape, square.svg ?

Answer 1

All the font-awesome svg's are located in this handy github repo Font Awesome SVG's

You can insert the svg into a span, like so: *note you need to change the inline height and width, but leave the viewbox as is. To change the color of an svg, use fill: #colorvalue

<span>
    <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 416v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z"/></svg>
</span>

Answer 2

I had the same desire, and found my way with Icomoon.io :

You can (for free) generate a font including only the icons you selected, with a nice GUI:

In picture: Icomoon - GUI

(sorry I can't embed picture here, I'm new to SO and don't have enough 'reputation'..)

The CSS and HTML are also provided:

In picture: Icomoon - GUI 2

Only drawback, the free tier does not include WOFF2 file (but you get .eot, svg, ttf and woff - you may find a woff2 generator online)

You prefer SVG? No problem, it's also provided!

In picture: Icomoon - generate SVG