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!

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!

• javascript
• html
• css
• svg
• font-awesome

Share Improve this question Follow edited Aug 26, 2016 at 17:14 Unbreakable asked Aug 26, 2016 at 17:10 UnbreakableUnbreakable 8,1322424 gold badges108108 silver badges191191 bronze badges 2

• You a looking for Sprites – Christian Gollhardt Commented Aug 26, 2016 at 17:13
• fontawesome.io – Unbreakable Commented Aug 26, 2016 at 17:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I use Ioon 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