CODEWITHSUNDEEP
javascripthtmlcsssvgfont-awesome
Unbreakable
Unbreakable

Reputation: 8132

How to use svg icons just like "font awesome" icons

I am new to front-end development. And one of the sample project that I am going through uses "font awesome" icons instead of images. Font-Awesome Link And every where instead of <img src> all I find is <i class= "">. I researched a little and found out these icons are basically svg files. So, I created couple of svg files for learning purpose. But I don't know how to correctly include svg files.

Question 1: So I am putting svg files in my own project and calling them like <img src = "images/sms_connect_logo.svg"/>. I am able to see the icon but is it the right way to add icons. I wanted to use something like <i class = "blabla"> to get the desired result as its done in sample project.

Question 2: Currently, the icon I have created is of black colour. I want it to be light gray in colour. So do I need to create another SVG file of same icon with light gray colour so the same black icon can be changed to gray by some css tweaking. (Using the Power of SVG files).

I am totally new so I might not have asked question the right way. Please let me know if I am missing something.

Thanks!

Upvotes: 5

Views: 8026

Answers (1)

plong0
plong0

Reputation: 2188

I use Icomoon to build a custom icon font. You can import icons from fontawesome and other icon libraries, plus add your own very easily.

It is also nice because you are able to select only the icons you need for your app, which can greatly reduce the size of the css and font files

Upvotes: 5

Related Questions