SCSS: Mixin: Web Font Icons

_fonts.scss

@font-face {
    font-family: 'Icons';
    src: url('../fonts/icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

_mixin_web-font-icons.scss

@mixin icon($type, $pseudoElem, $display: block) {
    &:#{$pseudoElem} {
        display: $display;
        color: inherit;
        font-family: 'Icons';

        @if $type == arrow_down {
            content: 'J';
        } @else if $type == arrow_up {
            content: 'K';
        } @else if $type == twitter {
            content: 'B';
        } @else if $type == facebook {
            content: 'C';
        }
    }

    span {
        display: none;
    }
}

gistfile1.html

<a href="http://twitter.com/_martinwolf" class="footer-social__icon footer-social__icon--twitter">
    <span>Twitter</span>
</a>

gistfile2.scss

.footer-social__icon--twitter {
    @include icon(twitter, before);
}