Ignition comes with some svg icons to start with.
They are located in the folder assets/icons. The icons are created and exported with icomoon. In this way the icons are extremely customizable and can easily be replaced. Instead of including a huge icon font library you can adjust, remove and add icons as needed. It’s smarter and faster than loading tons of unnecessary icons. Best of all it’s all svg.
Viewing Your Current Icons
You can always view your theme’s icons by going to:
yoursite.com/icons
There you will see all your icons and their names. This is because a special redirect has been created and that url takes you to the special html file created by icomoon.
If you are having trouble seeing the icons, make sure you set your permalinks.
Outputting the icons
You can output the icons via html or php. Here is how:
HTML
You can output the svg icons using html. The html is taken by javascript and replaced with the actual svg code.
<i class="svg-icon icon-folder"></i>The code above will be replaced with the svg icon code and will output the folder icon. Here is what it looks like
This can be used anywhere including menu items you make in WordPress Menus. It’s great and requires only a little knowledge of html.
PHP
In your theme template files you can output the icon using php. This function was stolen from Twenty-seventeen and modified just a bit. The functions for icons can be found in the icon-functions.php included in the inc folder.
Here is how you can output the icon in php:
<?php
echo ign_get_svg( array("icon" => "folder") );
?>The array can also take a title and description parameter. This will output an svg just like the html version except it can take the added parameters and output them for the svg.
Adjusting the Icons
Sometimes the svg will need to be nudged a bit up or down to align right with text or items it’s next to. You can make adjustments by adding css. There is an icons.scss file for this purpose. You can use top and bottom properties to nudge the svg items around as needed.
Roll Your Own Icons
The amazing thing about Ignition is that you can replace or change the icons completely! The icons were originally exported with icomoon. So you can go there and make your own very easily. You can even import the ones currently on the site and edit from there. To do that just import the json file into icomoons app.
Warning!
If you replace the icons, make sure there is an icon named angle-right, and sidebar. These icons are used by ignition and are expected to be found! The others are all optional and can be removed. Angle-right is used for dropdowns and sidebar is used for the sidebar icon.
How to replace the icons
Open icomoon’s web app here.
Now you can select icons you want, or even purchase new ones. They have font-awesome so you can select free ones from that batch. Icomoon has it’s own free selection as well.
You can even import svg icons you have made. You can also import the complete set that currently ships with ignition by clicking import icons at the top and importing the selection.json file found in the icons folder.
Once you have the icons you want and they are selected (they turn orange) click the bottom left link “Generate SVG & More”.
This will take you to the download page. At the top, click preferences and make sure the class prefix is icon. All that’s left is to download the svg by clicking download in the lower left.
Unzip the downloaded file and replace the contents of the icons folder in the current theme. Viola! You have new icons ready to use!! Check them out by visiting yoursite.com/icons.
Pretty cool huh?