Kaylo• 270
@KayloPortal
Posted
🎊Hello! Hope you have a greatful day.
- HTML cannot edit jpg or png files. You can only edit svg & canavs, with HTML, CSS & JS
🎄So what's the key?
You can change the color of these icons 2 ways:
1/ Using <i></i> (HTML icons)
- Some websites like font-awesome, gives you HTML icons and you can use them in your project.
- It give you a kit, and a link. you put the icon into your html, and change its color using CSS color property.
- This is a nice way, but if you want to resize the icons accurately and have more control on your icon, you have to bye premium account.
2/ Using svg (My suggestion)
- As I said, html & CSS have a nice control on svg documents, if you have the script code of them.
- if you just put an svg as an image(with <img> tag) in your html, It dose not have any difference with using png or jpg. you can't edit them by HTML at all.
- To edit svg files, you need to have the code of them, not just the image. but how?
- Some websites like svgsprite.es, get the svg documents and give you the coded version of them, and you can use them.
So, we putted the coded version of svg in our project. how to edit them now?
It need long and many lines to explain, but briefly:
- You got the code, put it in a file. like social-icons.svg
- If you got it from svgsprites.es, it put an id for each <symbol> tag. but if you don't see them, put a manual id for every <symbol> tag as an attribute.
- now, put the social-icons.svg relative to the HTML file.
- go to your html file, open an svg tag and put a <use> tag inside it like this: <svg class="social-icon"> <use xlink:href="social-icons.svg#icon-twitter"></use> </svg>
- in the xlink:href, type the url of social-icons.svg first, and then, type the svg id you want to use and place a "#" at the beginning.
- now, give a class to each svg, select it in CSS, and change the "fill" property to change the color.
I used these svg icons in my "Huddle Landing Page" challenge. Take a look or use them if you want! I hope it was useful✨
0
