using a font for icons

mixins.scss

/*
	This adds the desired character as an overlayed icon vertically and horizontally
	centered on the element.
	This uses the :after pseudo element so this element is not usable afterwards.
*/
@mixin fontIcon($font, $char, $size) {
	&:after {
		// character related to the desired icon
		content: $char;
		font-family: $font;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		display: block;
		position: relative;

		font-size: $size;

		top: 50%;
		line-height: 1;
		margin-top: - $size / 2;

		left: 50%;
		width: $size;
		margin-left: - $size / 2;
	}
}

sample.scss

.a-class{
	@include fontIcon('TheIconFont', "\e618", 2rem);
}