Skip to main content

Adding icons into powrs icon font

Creating Icon Font

  1. Add to icomoon (https://icomoon.io/), generate icon font, download and unzip file. You might have to buy a month subscription from icomoon to make this happen. That's what we've done in the past.

  2. In that file, open style.css and copy just the icon classes into our icon stylesheet (powrconsv4.scss)

  3. Find font-face with long url( “data:application”). Copy that block and replace with block ie9-overrides.css.scss

  4. “Command shift F” Find and replace old name of icons with the new name.

  5. Rename icon stylesheet file in code base with new name of icons. (currently powrconsv4.scss) <- update this file name if you rename the file

  6. Replace font files app/assets/fonts (ex. .tff) in code base with downloaded font files from icomoon.

  7. In font folder downloaded from icomoon, find ie7.css. Copy, and then replace just the icon classes in ie8-overrides in repo. Also, copy ie9-overrides font face with long “data-application” line and replace in ie8.overrides.

  8. In ie7.js, copy (except for comments) and replace in code base in ie8-overrides.js. IMPORTANT: Keep the first line in ie8-overrides.js intact. (may be unnecessary)

  9. Push live :)

Naming for icon file should be like: formbuilder, countdowntimer, mediagallery, etc. Note: icon- is added by icomoon so the class will look like icon-formbuilder