Further improvements

As of writing this book, font-awesome has a total of 439 icons. Also all the Sass variables and setup is within _variables.scss and _icons.scss which may be hard to maintain. With maps, we can organize these icons further.

Icon categories

The 439 icons, can be divided into 10 categories:

• Web application icons
• File type icons
• Spinner icons
• Form control icons
• Currency icons
• Text editor icons
• Directional icons
• Video player icons
• Brand icons
• Medical icons

Now that we have divided these icons into their category, we can use maps to organize them:

Web application icons

$fa-web-app-icons-map: (
    adjust: "\f042",
    anchor: "\f13d",
    archive: "\f187",
    arrows: "\f047",
    "arrows-h": "\f07e",
    "arrows-v": "\f07d",
    asterisk: "\f069",
    ...
);

File type icons

fa-file-type-icons-map: (
    file: "\f15b",
    "file-archive-o": "\f1c6",
    "file-audio-o": "\f1c7",
    "file-code-o": "\f1c9",
    "file-excel-o": "\f1c3",
    "file-image-o": "\f1c5",
    "file-movie-o": "\f1c8",
    "file-o": "\f016",
    "file-pdf-o": "\f1c1",
    "file-photo-o": "\f1c5",
    "file-picture-o": "\f1c5",
    "file-powerpoint-o": "\f1c4",
    "file-sound-o": "\f1c7",
    "file-text": "\f15c",
    "file-text-o": "\f0f6",
    "file-video-o": "\f1c8",
    "file-word-o": "\f1c2",
    "file-zip-o": "\f1c6"
) !default;

We will create a map for each category. We can further organize these maps into a list like so:

$fa-icons-list: $fa-web-app-icons-map, 
                $fa-file-type-icons-map, 
                $fa-spinner-icons-map, 
                $fa-form-control-icons-map, 
                $fa-currency-icons-map, 
                $fa-text-editor-icons-map, 
                $fa-directional-icons-map, 
                $fa-brand-icons-map, 
                $fa-video-player-icons-map, 
                $fa-medical-icons-map;

A list can take any data type value and in this case we have placed individual maps within the $fa-icons-list. Now we can iterate through this lists as such:

@each $icon-map in $fa-icons-list {
    // this will return the individual maps
}

Now that we have the individual maps, we can iterate through the key/value pairs like so:

@each $icon-map in $fa-icons-list {
    @each $icon-name, $icon-value in $icon-map {
        .#{$fa-css-prefix}-#{$icon-name}:before { content: #{$icon-value}; }
    }
}

With this we have taken advantage of lists, maps, and control directives.

For the final results, go to the Font-awesome fork and explore it further.