Our standard icons are using Font Awesome a vector based icon font. Check out the Font Awesome website  to learn more about them. If you are trying to use an icon and it doesn't work, it might be because it is from a version we haven't updated to, yet.

To add a font you must work in HTML view (except when using the callout addon).

Example of a simple icon

Example of a title icon

Font Awesome style options

Use Font Awesome to add icons to your pages. To use them add .fa class and then the class for the icon which is found at Font Awesome.

Increase size of icons by using fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes.

Sizes will increase relative to their container.

To stack multiple icons, use thefa-stackclass on the parent, thefa-stack-1xfor the regularly sized icon, andfa-stack-2xfor the larger icon.fa-inversecan be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

Change color of by adding a class.

Use Font Awesome icons to indicate nonstandard links

Use icons to let users know when a hyperlink is going to do something other than open another page on kingcounty.gov

Icon Standards

Use these standard fonts whenever possible so the experience for our site visitors is consistent throughout the site:

Template standards

• King County home page
• Breadcrumbs
• Collapsed menu
• Dropdown menus
• More info
• More...
• Expand navigation item
• Collapse navigation item
• Search
• Print page
• Quotations
• Not used

Content

• Charts and open data (Socrata)(fa-bar-chart-o)
• Tables (fa-table)
• Calendars (fa-calendar)
• Pictures (fa-picture-o)
• Photos (fa-image)
• Photos (fa-camera)
• Online payments (fa-dollar)
• Online payments (fa-money)
• Online payments (fa-credit-card)
• Maps (fa-location-arrow)
• Maps (fa-map-marker)
• Thumbtack (fa-thumb-tack)
• FAQs (fa-question)
• FAQs (fa-question-circle)
• Bell (fa-bell-o)
• Bullhorn (fa-bullhorn)
• Languages (fa-globe)
• Languages. Is this a new standard icon? (fa-language)
• Key (fa-key)
• Ideas (fa-lightbulb-o)
• Training (fa-graduation-cap)
• Accessibility (fa-wheelchair)
• Important information (fa-exclamation)
• Important information (fa-exclamation-circle)
• Important information (fa-exclamation-triangle)
• Information (fa-info)
• Information (fa-info-circle)
• Deadline or time sensitive (fa-clock-o)
• Settings (fa-gear)
• Settings (fa-gears)
• Sitecore (fa-edit)
• Pencil (fa-pencil)
• Tools (fa-wrench)
• Thumbs down (fa-thumbs-o-down)
• Thumbs up (fa-thumbs-o-up)

Social media icons

• Pinterest
• Facebook
• Twitter
• Vimeo
• YouTube
• Flicker
• LinkedIn
• Google Plus
• Blog
• Email in a social media list
• RSS feed

Other communication icons

• Email on a dark background (like the footer)
• Email on a white background
• RSS feed
• Subscribe to
• Subscribe
• Phone number
• Surveys and forms
• Comments & feedback

Devices

• Laptop
• Tablet
• Desktop
• Mobile phone

Link icons

• External link
• PDF file (this is the preferred format)
• Microsoft Word file
• Text file (typically a transcript of a video)
• Excel file
• Powerpoint file
• Image file for download
• Audio file for download
• Audio file for download
• Video file for download
• Videos for streaming
• Video for streaming

Miscellaneous topics that might be useful

• Child
• Male
• Female
• Person
• People
• Fire extinguisher
• Flag
• Suitcase
• Flask
• Trophy
• Courts
• Pets and animals
• Solid waste
• Recycle
• Sustainable info or nature
• Tree or nature
• Sun
• Umbrella
• Roads
• Car
• Taxi
• Truck
• Plane
• Ambulance
• Doctor
• Health care
• Cardiac care
• Healthcare facilities
• Medical
• Restaurants

All fonts

For a searchable list of fonts visit Font Awesome.