Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 2)

Icon font web usage

The icon package is available for download upon request and requires approval from the Customer Service & Communications Advertising division manager. For more information, contact your communications representative.

The City of Calgary icon package includes the Font Awesome library. Due to distribution terms in the Font Awesome license, the City of Calgary icon package is separated into two folders.

  1. cicon - The City’s icon font created by City staff
  2. font-awesome - The Font Awesome icon-font customized for placement, class names, and font-names to differentiate from the original Font Awesome files

Import the following files and directories from the icon package into your project.

  • cicon
    • style.css
    • all font files in the /fonts directory
    • optional IE7 CSS and JavaScript support files in the /ie7 directory
  • font-awesome
    • style.css
    • all font files in the /fonts directory
    • optional IE7 CSS and JavaScript support files in the /ie7 directory

Add the icon font stylesheets to the <head> section in your HTML. You may optionally choose to package the files together using a CSS compiler.


<!-- Example of how to import the icon font CSS to the page: -->
<link href="css/cicon/style.css" rel="stylesheet">
<link href="css/font-awesome/style.css" rel="stylesheet">