KNACSS/sass/_icons.scss

/* ----------------------------- */
/* ==icons                       */
/* ----------------------------- */

.icon {
  @include inline-block();
}

/**
 * 1. Future proof; prevent screen-reader from reading it
 * 2. Triggers hardware acceleration
 */
.icon:before,
.icon > li:before,
.icon.after:after,
.icon.after > li:after {
    content: "";
    @include inline-block(middle);
    position: relative; 
    top: -.1em;
    margin: 0 .3em 0 0;
    font: 1.4em/1 sans-serif;
    color: #000;
    text-shadow: 1px 1px 0 rgba(0,0,0,.1);
    speak: none; /* 1 */

    @include mq(medium) {
        font: 1em/0.6 sans-serif;
        -webkit-transform: rotateZ(0.05deg); /* 2 */
    }
}

.icon.after,
.icon.after > li {
    &:after {
        margin: 0 0 0 8px;
    }
}

ul.icon {
    display: block;
}

ul.icon > li {
    list-style: none;
}

ul.icon:before,
ul.icon.after:after {
    content: "";
}

.icon.after,
.icon.after > li {
    &:before {
        content: "" !important;
    }
}

/**
 * Unicode icons
 * (name, unicode code, is-bold?)
 */
$icons: ( (rate,     2605, false),
          (unrate,   2606, false),
          (check,    2713, false),
          (uncheck,  2717, false),
          (cloud,    2601, false),
          (dl,       21E3,  true),
          (cross,    2716,  true),
          (arrow1,   2192, false),
          (arrow2,   279E, false),
          (arrow3,   279A, false),
          (bracket1, 2039,  true),
          (bracket2, 203A,  true),
          (up,       25B2, false),
          (down,     25BC, false),
          (bull,     2022, false),
          (bull2,    25E6, false),
          (bull3,    2023, false),
          (nav,      2630,  true),
          (losange,  25C6, false),
          (asteri,   2731,  true),
          (mail,     2709, false) );

/**
 * Looping through icons
 */
@each $item in $icons {
    .icon-#{nth($item, 1)}:before,
    .icon-#{nth($item, 1)} > li:before,
    .icon-#{nth($item, 1)}.after:after,
    .icon-#{nth($item, 1)}.after > li:after {
        content: "\#{nth($item, 2)}";
        @if nth($item, 3) == true {
            font-weight: bold;
        }
    }

}

/**
 * Icons specific
 */
.icon-arrow1:before, 
.icon-arrow1 > li:before,
.icon-arrow1.after:after, 
.icon-arrow1.after > li:after {
    position: relative; 
    top: -.15em;
}

.icon-bracket1:before, 
.icon-bracket1 > li:before,
.icon-bracket1.after:after, 
.icon-bracket1.after > li:after,
.icon-bracket2:before, 
.icon-bracket2 > li:before,
.icon-bracket2.after:after, 
.icon-bracket2.after > li:after {
    font-size: 1.6em;
    position: relative; 
    top: -.15em;
}

.icon-bull:before, 
.icon-bull > li:before,
.icon-bull.after:after, 
.icon-bull.after > li:after {
    font-size: 1.2em;
    top: -.05em;
}

.icon-bull2:before, 
.icon-bull2 > li:before,
.icon-bull2.after:after, 
.icon-bull2.after > li:after {
    top: -.05em;
}

.icon-bull3:before, 
.icon-bull3 > li:before,
.icon-bull3.after:after, 
.icon-bull3.after > li:after {
    font-size: 1.6em;
    top: -.05em;
}

.icon-nav:before, 
.icon-nav > li:before,
.icon-nav.after:after, 
.icon-nav.after > li:after {
    font-size: 1.6em;
}

.icon-mail:before, 
.icon-mail > li:before,
.icon-mail.after:after, 
.icon-mail.after > li:after {
    font-size: 1.6em;
    top: -.05em;
}

ol.styled {
  counter-reset: styled;
} 

ol.styled > li {
    list-style-type: none;
    counter-increment: styled;
    margin-bottom: .3em;
}

ol.styled > li:before {
    content: counter(styled); 
    @include inline-block(middle);
    width: 1em; 
    height: 1em;
    line-height: 1;
    padding: 2px;
    margin-right: .4em;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
    font-size: .9em;
    text-align: center;
    text-indent: -.1em;
    color: white;		
}