Icons
0001-01-01
Standard Named CMS Icons
These declaratively named are always available in the base installation of the CMS core site and are designed to work with any standard icon collection distributed with the CMS. Additional classes can be added to an icon to make it look different; these ones are marked up with icon-larger.
Alert
Audio
Audio Description
Bell
Blog
Book
Book Reader
Bookmark
Box
Boxes
Calendar
Calendar Add
Camera
Cart
Cart Add
Clock
Closed Captioning
Comment
Contact
Copyright
Credit Card
Download
Edit
Eye
External Link
Feedback
Gear
Globe
Help
Home
Image
Images
Info
Key
Link
Lock
Map
Map Marked
Map Marker
Microphone
Paperclip
Pencil
Play
Podcast
Presentation
RSS
Search
Share
Shipping
Sign In
Sign Out
Sitemap
Spreadsheet
Tools
Trademark
Trash
User
User Check
User Circle
User Lock
User Shield
Users
Users2
Universal Access
Video
Warning
File Type Icons
CSV
File
Folder
Folder Open
Powerpoint
Presentation
Spreadsheet
Word Doc
Excel Doc
Zip
Numbers
Zero
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Double Zero
Duotone Icons
A licence for Font Awesome Pro or another library that includes duotone support is required for duotone icons, and then they're easily implemented side by side with monotone icons.
Alert
Audio
Audio Description
Bell
Blog
Book
Book Reader
Standard Social Icons
A licence for Font Awesome Pro or another library that includes the relevant brands is required for these social icons.
Facebook Messenger
Vimeo
Youtube
Others...
Manually Chosen Font Icons
Thousands of Icons are Included
In addition to the named CMS icons, with a little bit of HTML knowledge authors can place any icons available in the site's icon font file directly into a page. A few examples are below, and these are just from the free icons supplied with the CMS.
fa-chess
fa-restroom
fa-robot
fa-map-marked-alt
fad fa-chess
fad fa-restroom
fad fa-robot
fad fa-map-marked-alt
fa-cat
fa-paw
fa-gift
fa-dizzy
fad fa-cat
fad fa-paw
fad fa-gift
fad fa-dizzy
Icon Sizes
The size of an icon is relative to the element that it is attached to. For instance, an icon attached to a heading will be bigger than normal body text. The site designer can change these sizes but the CMS includes a useful standard approach.
Small - Half the text size.
Medium (Default) - Same as the text size.
Large - Double the text size.
Larger - Triple the text size.
Huge - 4.5x the text size.
Mega - 6x the text size.
Icons on Links and Buttons
Download Button Secondary Button Small Button Large Button
Icon Layouts, Shapes, and Styles
Circle icon
Square icon
On background
Colored icon
Tinted color
Square border
Dark square
Gradient square
Just a boxes icon
Centered stacked icon
Stacked circle border
Centered stacked darker background
Standalone Icons
Icons can be used on their own, but be careful about accessibility when you do this. Standard icon markup is not accessible out of the box, you'll need to do some work of your own.
Astronaut Meteor Otter
Icon Color
Icons can be colored with any of the theme's color and background color options, or the site designer can add new treatments.
Linked Icons
These examples show how icons behave when they are links.
Theme Colors
Generic Colors
Color Tints (Green Example)
Specialised Icon Treatments
Get your website designer to add specialised icon treatments to the standard library, it's easy!
< Meteor > |: Robot :| ~ Biohazard ~