Icon Font Library

The CaGov icon font includes 124 icons you can use in your site. Four different formats of the font are included for compatibility with all popular browsers. You may need to add a mime map to your webserver for the WOFF font. To determine if your webserver needs it, upload the /fonts/CaGov.woff file to your webserver. Try downloading the WOFF in your browser by visiting: http://yourwebsite.ca.gov/fonts/CaGov.woff . If it prompts you to download the font, your server is configured correctly. If you get a 404 or other error, you'll need to add a mime map for extension ".woff", and the mimetype is "application/font-woff". Ask your server admin if you need assistance.

To insert an icon into your page, insert an empty span tag with the class name for the icon you wish to use, for example:

<h2><span class="ca-gov-icon-arrow-down"></span> Heading</h2>

will appear as:

Heading

When icons are used with H1 to H5 headings and some pre-configured modules, styles for font-size and color are included. When used anywhere else you'll need to add styles for the font-size and color yourself. Icon fonts can be styled using the same css rules used to style any other text on the page. For example color: and font-size: chnage the color and size of the icon.


Icons Reference Sheet

icon class name
ca-gov-icon-logo
ca-gov-icon-home
ca-gov-icon-menu
ca-gov-icon-apps
ca-gov-icon-search
ca-gov-icon-chat
ca-gov-icon-capitol
ca-gov-icon-state
ca-gov-icon-phone
ca-gov-icon-email
ca-gov-icon-contact-us
ca-gov-icon-calendar
ca-gov-icon-bear
ca-gov-icon-chat-bubble
ca-gov-icon-info-bubble
ca-gov-icon-share-button
ca-gov-icon-share-facebook
ca-gov-icon-share-email
ca-gov-icon-share-flickr
ca-gov-icon-share-twitter
ca-gov-icon-share-linkedin
ca-gov-icon-share-googleplus
ca-gov-icon-share-instagram
ca-gov-icon-share-pinterest
ca-gov-icon-share-vimeo
ca-gov-icon-share-youtube
ca-gov-icon-law-enforcement
ca-gov-icon-justice-legal
ca-gov-icon-at-sign
ca-gov-icon-attachment
ca-gov-icon-zipped-file
ca-gov-icon-powerpoint
ca-gov-icon-excel
ca-gov-icon-word
ca-gov-icon-pdf
ca-gov-icon-share
ca-gov-icon-facebook
ca-gov-icon-linkedin
ca-gov-icon-youtube
ca-gov-icon-twitter
ca-gov-icon-pinterest
ca-gov-icon-vimeo
ca-gov-icon-instagram
ca-gov-icon-flickr
ca-gov-icon-google-plus
ca-gov-icon-microsoft
ca-gov-icon-apple
ca-gov-icon-android
ca-gov-icon-computer
ca-gov-icon-tablet
ca-gov-icon-smartphone
ca-gov-icon-roadways
ca-gov-icon-travel-car
ca-gov-icon-travel-air
ca-gov-icon-truck-delivery
ca-gov-icon-construction
ca-gov-icon-bar-chart
ca-gov-icon-pie-chart
ca-gov-icon-graph
ca-gov-icon-server
ca-gov-icon-download
ca-gov-icon-cloud-download
ca-gov-icon-cloud-upload
ca-gov-icon-shield
ca-gov-icon-fire
ca-gov-icon-binoculars
ca-gov-icon-compass
ca-gov-icon-sos
ca-gov-icon-shopping-cart
ca-gov-icon-video-camera
ca-gov-icon-camera
ca-gov-icon-green
ca-gov-icon-loud-speaker
ca-gov-icon-audio
ca-gov-icon-print
ca-gov-icon-medical
ca-gov-icon-zoom-out
ca-gov-icon-zoom-in
ca-gov-icon-important
ca-gov-icon-chat-bubbles
ca-gov-icon-phone
ca-gov-icon-people
ca-gov-icon-person
ca-gov-icon-user-id
ca-gov-icon-payment-card
ca-gov-icon-skip-backwards
ca-gov-icon-play
ca-gov-icon-pause
ca-gov-icon-skip-forward
ca-gov-icon-mail
ca-gov-icon-image
ca-gov-icon-house
ca-gov-icon-gear
ca-gov-icon-tool
ca-gov-icon-time
ca-gov-icon-cal
ca-gov-icon-check-list
ca-gov-icon-document
ca-gov-icon-clipboard
ca-gov-icon-page
ca-gov-icon-read-book
ca-gov-icon-cc-copyright
ca-gov-icon-ca-capitol
ca-gov-icon-ca-state
ca-gov-icon-favorite
ca-gov-icon-rss
ca-gov-icon-road-pin
ca-gov-icon-online-services
ca-gov-icon-link
ca-gov-icon-magnify-glass
ca-gov-icon-key
ca-gov-icon-lock
ca-gov-icon-info
ca-gov-icon-arrow-up
ca-gov-icon-arrow-down
ca-gov-icon-arrow-left
ca-gov-icon-arrow-right
ca-gov-icon-carousel-prev
ca-gov-icon-carousel-next
ca-gov-icon-arrow-prev
ca-gov-icon-arrow-next
ca-gov-icon-menu-toggle-closed
ca-gov-icon-menu-toggle-open
ca-gov-icon-carousel-play
ca-gov-icon-carousel-pause