How to use font awesome icon using SVG file

#beginners #fontawesome #css #html

In this blog I will show you how to use font awesome icons without using font awesome kit link.

Like this >>>

First Choose any icon form the font awesome. Then download the SVG file of the icon.
Than add the SVG file on html file like this.

HTML Part:

<p>
        <img class="icon" src="images/icons/star-solid.svg" alt="">
        <img class="icon" src="images/icons/star-solid.svg" alt="">
        <img class="icon" src="images/icons/star-solid.svg" alt="">
        <img class="icon" src="images/icons/star-half-stroke-solid.svg" alt="">
        <img class="icon" src="images/icons/star-regular.svg" alt="">
    </p>

CSS Part:

.icon{
    width: 50px;
}

Here I added three SVG files solid, half-solid, regular (5 image) for the 3.5 star rating.

On live website this will show >>>

Color Providing:

We can not set a color using the CSS. For setting a color we have to edit on the SVG file code. Here you can provide any color in the fill section. 'fill' use for color in the SVG image.