Icon Font

The @font-face

You can use a special font to insert scale-able icons into your websites. To use this special font you will need to add a font declaration to your CSS. This lets the browser know where to find the font file so it can be used inside the page. This is what a shortened example of this looks like. See the full version in the playground below.

@font-face {
   font-family:ETmodules;
   src:url('path.../modules.eot');
   font-weight:400;
   font-style:normal
}

Add a Class

Add a class to the HTML location that you want the icon to show up. The following example shows a class of mag being placed on an opening div tag. This is where I want an icon of a magnifying glass placed on the page.

Write the CSS Selector

Now we want the icon to be placed where the class of mag is found in the HTML. To do this you want to write the mag class CSS selector.

.mag{

}

In addition to the mag class CSS selector, we also want to specify that we want the icon to show up before this element. You can do this by using the ::before selector right after the mag class CSS selector.

.mag::before{

}

Set the Font

Once we have the selector we will now want to set the font for this specific rule. This will allow the icons to be used in this location.

.mag::before{
     font-family: ETmodules !important;
}

Insert the Icon

Next we will add the code that inserts the specific icon. This is is the content property. It adds content into the specified location, which in this case is before the element with the mag class. You will notice that the icon character is represented by a number, preceded by a backwards slash.

.mag::before{
     font-family: ETmodules !important;
     content: '\0055';
}

Change the Size, Color, etc

Since the icons are technically a font, their size, color, and other properties can be changed just like a font. Use the color property to change the icon color, use the font-size property to change the font size.

Icon Font Codes

This is not a complete list of all the icon codes available through this font, but it is a good sample.

Screen Shot 2018-02-28 at 1.22.41 PM

Activity

Here you can test out what you read, and achieve badges.

Activity Instructions

Make the playground look like the following:

Do the following:

Place a class for each of the icons on the corresponding divs
Create a new CSS rule for each of the classes that will place the corresponding icons before the divs
Change the color and size of the icons to match the example

\0076	\006D	\E007	\E00E	\0061	\E009	\E001	\E033	\E030	\E06F

\E037	\E093	\E094	\E105	\E615	\E614	\E61F	\0049	\006A	\007A