Using an Icon Font for OCHA icons

Owned by Erika Wei
Last updated: Aug 07, 2017
3 min read

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.

How to use the OCHA icon font:

  1. Download the ocha-icons.zip file
  2. Copy the '/fonts' directory and 'style.css' file to your project, updating the url paths for the font face in 'style.css' if necessary

  3. 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;
}

  4. 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
  5. The rendered markup:



How to add icons to the icon set:

  1. Open the IcoMoon app
  2. Click 'Import Project' and load the ocha-icons.json file
  3. Once the project is loaded, give the project a name, and click 'Load' to continue to the Selection page




  4. 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.

  5. After importing all the svgs you'd like to import, click the hamburger menu again and choose 'Select All'

  6. Once all icons are selected, click the 'Generate Font' button at the bottom of the page to go to the Font page




  7. On the Font page, you can edit the names of the individual icons - this will be the css class name of each icon in the generated font set
  8. If you'd like to change the settings of the font set, click the gear icon at the bottom of the page. Here, you can change the name of the font face and and the css class-prefix. Then click 'Download'




  9. 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.