Quick Guide to SVG icons.
For best results this is a 3 step process, of course step one is admit you have a SVG problem.
Overall this is a fast process
once you have done it a few times, so although this may look like a lot of work, its not but its more cumbersome that the FA way. I'm not saying this is the only way, or even a good way, its just a way that I've used.
Next we want to compact the SVG as much as we can so it takes as little room as possible in our CSS style sheet
- Goto https://jakearchibald.github.io/svgomg (https://jakearchibald.github.io/svgomg)/
- Open one of the SVG files that you downloaded, you should see its image in the app with the % of original size shown. Feel free to adjust the various settings to get it as compact as you want while not loosing significant detail.
- Select the "markup" tab and copy all of the SVG markup. Hint don't use "ctrl+a" but instead use the mouse to select the markup text. If you don't what happens is extra comment code gets added to the clipboard which kind of defeats the purpose of compacting!
Now we need to encode the SVG so we can use it directly in our CSS style sheet.
- Goto https://codepen.io/jakob-e/pen/doMoML (https://codepen.io/jakob-e/pen/doMoML)
- Paste the SVG markup into the box below the cartman image... sweeet
- The pasted SVG will be changed on the fly, in the same box you pasted it in. Its already highlighted for you, just copy it.
- Open your css file and add a new style and paste the code in there, it will look something like the following, using whatever name you want
.i-newicon::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M61.657 2.343a8 8 0 00-11.314 0L39.586 13.1 32 5.514l-8.485 8.485 6.652 6.652L.66 50.158a2.245 2.245 0 00-.644 1.841H.001v10a2 2 0 002 2h10.25c.576 0 1.152-.22 1.591-.659l29.507-29.507 6.652 6.652L58.486 32 50.9 24.414l10.757-10.757a8 8 0 000-11.314zM10.818 60H4v-6.818l29.348-29.348 6.818 6.818L10.818 60z'/%3E%3C/svg%3E");
}
Lastly and
importantly change the
"background-image" to instead say
"content" ... Boom Done ... Now you can use it in your theme as
<i class="icon i-newicon"></i>
If you want to change the color, just add the keyword
fill='' to the SVG definition, like fill='green' or if you want to use a specific hex color its fill='%23539442' .. that %23 is hex code for # so use %23 and then your 6 digit color hex code, here it was 539442 Here is an example.
.i-newicon::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23539442' viewBox='0 0 64 64'%3E%3Cpath d='M61.657 2.343a8 8 0 00-11.314 0L39.586 13.1 32 5.514l-8.485 8.485 6.652 6.652L.66 50.158a2.245 2.245 0 00-.644 1.841H.001v10a2 2 0 002 2h10.25c.576 0 1.152-.22 1.591-.659l29.507-29.507 6.652 6.652L58.486 32 50.9 24.414l10.757-10.757a8 8 0 000-11.314zM10.818 60H4v-6.818l29.348-29.348 6.818 6.818L10.818 60z'/%3E%3C/svg%3E");
}
Some icons don't really have a fill, you can instead try stroke as in
stroke='grey' stroke-width='0.07em' as with fill you can use %23 and a 6 digit hex color as in this example
.i-newicon::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='grey' stroke-width='0.07em' viewBox='0 0 64 64'%3E%3Cpath d='M61.657 2.343a8 8 0 00-11.314 0L39.586 13.1 32 5.514l-8.485 8.485 6.652 6.652L.66 50.158a2.245 2.245 0 00-.644 1.841H.001v10a2 2 0 002 2h10.25c.576 0 1.152-.22 1.591-.659l29.507-29.507 6.652 6.652L58.486 32 50.9 24.414l10.757-10.757a8 8 0 000-11.314zM10.818 60H4v-6.818l29.348-29.348 6.818 6.818L10.818 60z'/%3E%3C/svg%3E");
}
One of those two will change the color for you, sometimes you can even use both, just depends on the icon.
Why can't you? Browsers do bookmarks. ;)
@Spuds: thread title has teh tpyo.
I got curious about what a bloke might do if he was bored with everything having to be "flat design" these days. Turns out you can sort it.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
https://www.sitepoint.com/getting-started-svg-gradients/
This looks handy too: https://css-tricks.com/cascading-svg-fill-color/
Not preferred for various reasons. A forum should have its own bookmark ability.
Just bookmark it in your browser? :)
@Spuds thank you for the guide! It's much appreciated.
An alternative site to use to encode the SVG so it can be used inline is https://yoksel.github.io/url-encoder/ You can use that site in place of the one I listed in the tutorial. Its been my go to one since I found it, but use what you like, the results are the same.