ExpressionEngine®
Style Guide

Interaction Guidelines

Icons are fun, and great for saving space in an interface. Icons should be used consistently and sparingly.

ExpressionEngine uses Font Awesome to serve responsible iconography in it's CP. Font Awesome is used in the main navigation to indicate settings and tools, to add flavor to our alerts, and in our toolbars to indicate when and what actions a person may take on their content.

Font Awesome's license allows third party developers to leverage the same library of awesome icons for use in their ExpressionEngine add ons.

Reminder

ExpressionEngine doesn't use the class names from Font Awesome's CSS package. See below for recommended implementation with ExpressionEngine.

Implementation

Use font-family: ‘FontAwesome’; and the unicode character of your choice to add icons to your add on CSS.

Note: Note: The reason we use :before and :after to apply the icons is so we can put additional content into the element, and not require additional HTML markup.

CSS

.my-icon:before{
	/* fa-anchor */
	content: '\F13D';
	font-family: 'FontAwesome';
}

.my-other-icon:after{
	/* fa-balance-scale */
	content: '\F24E';
	font-family: 'FontAwesome';
}

LESS

@fa-anchor: '\F13D';
@fa-balance-scale: '\F24E';
@fam-ico: 'FontAwesome';

.my-icon{
	&:before{
		content: @fa-anchor;
		font-family: @fam-ico;
	}
}

.my-other-icon{
	&:after{
		content: @fa-balance-scale;
		font-family: @fam-ico;
	}
}

SASS

$fa-anchor: '\F13D';
$fa-balance-scale: '\F24E';
$fam-ico: 'FontAwesome';

.my-icon{
	&:before{
		content: $fa-anchor;
		font-family: $fam-ico;
	}
}

.my-other-icon{
	&:after{
		content: $fa-balance-scale;
		font-family: $fam-ico;
	}
}

HTML

<p class="my-icon">This is a paragraph that has been anchored.</p>
<p class="my-other-icon">This is a paragraph that has been balanced.</p>

Visual Output

This is a paragraph that has been anchored.

This is a paragraph that has been balanced.