Using a custom icon font for iconography is a lightweight way to display icons in vector format that will scale for various viewport sizes and can be defined using css. The OCHA icon font in this example was generated using IcoMoon.
You can define a css class 'icon-ocha' to set the font size, color, position, etc for all ocha icons
.icon-ocha { color: #046bb5; font-size: 24px; left: 25px; position: absolute; top: 10px; } |
In your markup you can then append the class name specified in 'style.css' for the specific icon you want to include on your page
<i class="icon-ocha icon-education"></i> Education |
On the Selection page, click the hamburger menu on the right-hand side of your icon set, select 'Import to Set', and choose the svg file to import
To prepare svg artwork, IcoMoon requires all strokes to be converted to fills and all fills to only use one color. |
After importing all the svgs you'd like to import, click the hamburger menu again and choose 'Select All'
In the downloaded zip file, copy the '/fonts' directory and 'style.css' file to your project, updating the url paths for the font face in 'style.css' if necessary
Make sure the icon class definitions in 'style.css' do not have any color definitions set by default. You can then set these colors, as necessary, in your other css files. |