We have covered how to generate an icon font using IcoMoon. On this tutorial i will be using the generated icon font into my Sass setup to include and use in a project.

Unpacking the icon font

  1. Unzip/extract the downloaded .zip file; then copy these files and folder to your project.

    • fonts/ - Where the font files are kept
    • selection.json - IcoMoon font selection configuration (in cases you need to append new fonts)
    • style.css - Predefined IcoMoon css for font icons
  2. Rename style.css to _icon-font.scss.

Sass setup

I’ve set up my project with the following file structure. You can use a different structure if you prefer but if you are following this tutorial I recommend using this one

  1. Create the sass folder place the _icon-font.scss from the unziped folder

  2. Create a css folder for the output css.

  3. We need to fix the _icon-font.scss to point to the “fonts” folder; open the file and change all instances of fonts/ to ../fonts/ then close the file.

  4. Copy the selection.json from the unziped folder to your project folder**optional

You should end up with the following structure

  • fonts/
  • selection.json
  • sass/
    • _icon-font.scss
  • css/ That’s done, we can now do the markup

The markup

Create a file and name it index.html then create a list of icons and give them classes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
	<head>
	 <meta charset="utf-8">
	 <meta name="viewport" width="device-width, initial-scale=1.0">
	 <title>Using IcoMoon with Sass</title>
	 <link href='http://fonts.googleapis.com/css?family=Roboto:400,700|Lato:300' rel='stylesheet' type='text/css'>
	 <link rel="stylesheet" href="css/main.css"/>
	</head>
	<body>
	 <h1>Using IcoMoon with SASS</h1>
	 <hr/>
	 <ul class="icons-list">
		 <li class="font-light"><span class="icon icon-account-circle"></span>Profile icon</li>
		 <li class="font-light"><span class="icon icon-medium icon-account-circle"></span>Profile icon medium</li>
		 <li class="font-light"><span class="icon icon-large icon-account-circle"></span>Profile icon large</li>
	 </ul>

	 <ul class="icons-list">
		 <li class="font-light"><span class="icon icon-description"></span>Description icon</li>
		 <li class="font-light"><span class="icon icon-medium icon-description"></span>Description icon medium</li>
		 <li class="font-light"><span class="icon icon-large icon-description"></span>Description icon large</li>
	 </ul>

	 <ul class="icons-list">
		 <li class="font-light"><span class="icon icon-grade"></span>Grade icon</li>
		 <li class="font-light"><span class="icon icon-medium icon-grade"></span>Grade icon medium</li>
		 <li class="font-light"><span class="icon icon-large icon-grade"></span>Grade icon large</li>
	 </ul>
	</body>
</html>

The stylesheet

Create a file main.sass under sass folder and import the ‘icon-font’ partial with the icon fonts configuration to use the icon font classes to display the fonts.

1
2
3
4
5
6
7
8
9
10
@import icon-font

// Icon sizes
.icon-medium
	@extend .icon
	font-size: 150%

.icon-large
	@extend .icon
	font-size: 200%

The main.sass file should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
@import icon-font

// Icon sizes
.icon-medium
	@extend .icon
	font-size: 150%

.icon-large
	@extend .icon
	font-size: 200%


// == Making things pretty == //

// Mixins 

@mixin clearfix()
	*zoom: 1

	&:before,
	&:after
		content: " "
		display: table

	&:after
		clear: both


// Variables
$roboto: 'Roboto', sans-serif
$lato: 'Lato', sans-serif

$font-color: #333
$base-color: #f4f4fa

body 
	margin: 20px
	background-color: $base-color
	font-family: $roboto
	color: $font-color

h1,
h2,
h3
	font-weight: 400
	text-align: center

hr
	border: none
	height: 0.05em
	background-color: lighten($font-color, 50%)

.font-light
	font-family: $lato
	font-weight: 300

.icons-list
	list-style: none
	padding: 0
	margin: 5em auto
	+clearfix

	li
		float: left
		text-align: center
		width: (100%) / 3

		@media screen and (max-width: 768px)
			width: 100%
			margin-bottom: 5em

		.icon
			display: block

Open index.html in your web browser and you should be able to see the icon fonts working. If you have trouble getting it to work you can get the code for this tutorial on my Github