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.
- Navigate to https://icomoon.io/app/#/select They have many "collections" to choose from, most of the default ones in ElkArte are from icoMoon-Free but you can choose from a wide variety of other free packs.
- Select the icon(s) you want to add, search is a big help
- At the bottom of the page, select "Generate SVG and more"
- On the SVG page, I like to set the size to 32px (top right corner), you can set any size really.
- Select Download. Optionally you can edit what formats are included in the download, we only need the SVG
- Extract the zip file somewhere
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/
- 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
- 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.
Modern, Free, Powerful