Lazy laod SVG Image using font-awesome classes or custom svg icons !
With Caching !
Can be styled / colored / outlined !

Best usage :

<span data-icon="fas fa-house">Hello</span>
–>Hello

DEMO

case 1 : URL IN HTML : data-icon

p > span data-icon=https….twitter.svg

span data-icon=https….twitter.svg. Beautifully aligned. class=”outline”

span icon-after data-icon=https….twitter.svg, class=”outline green”

case 2 : i:before with url in css

CSS : #phone –icon-svg:https…phone.svg

CSS : #phone –icon-svg:https…phone.svg

CSS : #phone –icon-svg:https…phone.svg, class=”outline”

CSS : #phone –icon-svg:https…phone.svg, class=”outline green”

Or span #phone::before, with content

My phone

Or #::after, with content

My Email

case 3 : i with classes in HTML

class=fab fa-facebook

class=fas fas fa-basket

class=fas fa-clock , no cache

case 3BIS : any element with “classes” in –data-icon

<span data-icon=fab fa-facebook>

<span data-icon=fas fa-house>

<span data-icon=fas fa-house> , no cache

case 4 : *::before or *::after with css classes

HTML : i, CSS i::before : –icon-svg:”fab fa-google”;

HTML : span + text, CSS : span::after –icon-svg:”fab fa-instagram”; class=”red” Instagram