The Ushahidi Platform icons are from the Font Awesome set, an open source icon font made by Dave Gandy. We are using a mixin to create a Sass map of our icons. This mixin allows for a :before & :after placement of the icon, as well as custom styles. We then add them to elements via a Sass @import.

Adding Icons to the Sass Map

The icons used in the Ushahidi Platform are listed on the Sass map at the bottom of the font-awesome mixin To add an icon, you can name it whatever you want and define it with the entity listed on the Font Awesome Cheatsheet.

                            
                                $icons: (
                                    icon-name: "\f06a",
                                    another-icon-name: "\f077" //this is the entity #
                                );
                            
                        

Using mixin to @import icons to elements

To include an icon on an element (in this example, a button), you simply @include icon, then define whether you want it to come before or after the element, and the icon you want to display. The icon then becomes a pseudo element.

                            
                                button.dropdown {
                                    @include icon (before, chevron-down);
                                }
                            
                        

Sass @import with custom styles

You can give the icon itself custom styles by including them in the mixin.

                            
                                button.dropdown {
                                    @include icon (before, chevron-down) {
                                        padding: 3px;
                                        color: $yellow;
                                    }
                                }