CODEWITHSUNDEEP
htmlcsssvgiconsfont-awesome
Leo Messi
Leo Messi

Reputation: 6166

Replace font awesome icon with an svg

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?

Upvotes: 1

Views: 7499

Answers (2)

roneo.org
roneo.org

Reputation: 419

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

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

Upvotes: 1

Jaclyn Ciringione
Jaclyn Ciringione

Reputation: 44

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>

Upvotes: 1

Related Questions