A DRY Sass mixin for generating icon-fonts with custom properties

SASS Icon Font Mixin.markdown

A DRY Sass mixin for generating icon-fonts with custom properties

There are some good sass mixins out there for icon-fonts. But I coudn't find one that followed DRY principles and allowed you to use semantic html and not have icon- classes everywhere.

##First set up your base icon font styles.

// first declaration needed for IE8
@font-face { 
  font-family: 'lgg-icons';
  src: url('fonts/lgg-icons.eot?1393430790');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'lgg-icons';
  src: url('fonts/lgg-icons.woff?1393430790') format("woff"), url('fonts/lgg-icons.ttf?1393430790') format("truetype"), url('fonts/lgg-icons.svg?1393430790') format("svg");
  font-weight: normal;
  font-style: normal;
}

// placeholder class that we will extend in the mixin

%icon-styles {
    font-family: "lgg-icons";
         font-style: normal;
         font-weight: normal;
         speak: none;
         text-decoration: inherit;
         text-align: center;
         font-variant: normal;
         text-transform: none;
         -webkit-font-smoothing: antialiased;
}

Mixin

This mixin is based on http://jaydenseric.com/blog/fun-with-sass-and-font-icons but uses @extend to minimise repeated code for each icon

@mixin icon($position: before, $icon: false, $styles: true) {
    @if $position == both {
        $position: 'before, &:after';
    }
    // Either a :before or :after pseudo-element, or both, defaulting to :before
    &:#{$position} {
        @if $icon {
            // A particular icon has been specified
            content: "#{map-get($icons, $icon)}";
        }
        @if $styles {
            @extend %icon-styles
        }
        // Include any extra rules supplied for the pseudo-element
        @content;
    }
}


// sass map listing icons in use

$icons: (
   up-arrow: \e834,
   right-arrow: \e814,
   down-arrow: \e804,
   left-arrow: e815,
   up-open-arrow: \e807,
   right-open-arrow: \e806,
   tel: \e839, //mobile
   bullet: \e80b,
   left-quote: \e80d,
   right-quote: \e80e,
   search: \e82b,
   vimeo: \e812,
   twitter: \e809,
   email: \e800,
   menu: \e823
);

Example Usage

This mixin can be used as on icon-class with either before or after pseudoselector and custom properties for font, margins etc

.icon-mail {
    @include icon('after','email'){
    @include font-size($large);
    margin-left: .5em;
   };
}

// include the mixin anywhere you want with semantic classes

.tel {
  @include icon('before', 'tel');
}

#Generated CSS

.icon-mail:after, .tel:before {
  font-family: "lgg-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}


.icon-mail:after {
  content: "\e800";
  font-size: 32px;
  font-size: 1.6rem;
  margin-left: 0.5em;
}

.tel:before {
  content: "\e839";
}