ᴛʀʙʟ ᴛʜᴇᴍᴇs

[thme130trbl-blog]

TUTORIAL: SVG Icons

Difficultly: Easy

How to get icons (which act like text) like the ones below

1. Download the zip file from here 

you will need something to be able to extract the file (I use winrar with the free trial)

2. Pick which SVG you want

rather than opening them all I just look at the ones on the website

3. Open the SVG 

usually mine open in internet explorer or something

4. in the window press “ctrl” + “U” together

for mac i think its “command” + “U” but im not sure

5. Copy the code from <svg (other words here>  to </svg>

6. Paste the code where you want it

7. after you paste the code you have to edit it otherwise it will show up as a giant icon so you can do two things

Method 1

1. inside the begining <svg> tag put (you can change the 15 to the size you want)

height=“15px” width=“15px”

Method 2

1. in the class or id you have surrounding the svg

ex <div id=“name”> <svg sldkjfsldkfjl></svg></div>

go into the css for that class/id (#name or .name) and paste this after it (change “name” to the real name of the class/id and you can change #000 to any color you want it to be)

#name svg

{

height:15px;

width:15px;

fill:#000;

}

Here is an extra post about svgs