visuelleGedanken.de

Although I’m not the biggest fan of Icon Fonts and am having a closer look at svg at the moment, I used Icon Fonts a lot in the past. Mostly custom ones created by a Designer for me. At superReal we created a pretty nice Sass Mixin which helps using icons across your project in the same way and having an overview over all your icons in one place.

Every icon in an Icon Font is basically a character of the font. In our example writing a t with the Icon Font as the font-family will result in a twitter icon. But because icons are just graphics that would leave screen readers and search engines clueless because t doesn’t mean anything to them. So you should also provide a text version of every icon which can be indexed by search engines and used by screen readers. So to accomplish that I use pseudo elements with the content property to display the icons and hide the standard text with CSS.
The HTML looks like follows:

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

With CSS we can than hide the span and only show the icon.
Our Mixin has three options. The first one is the $type and is the most important one and is mandatory because it defines which Icon is used from the if statement below. The second one is the pseudo element which by default is :before and the third is the display option which by default is block. We also define the font size (in the case of an icon font the size of the icon) and the line height in the Mixin for each icon individually within the if statement.
At last we hide the span element.

@mixin icon($type, $pseudo: before, $display: block) {
    &:#{$pseudo} {
        color: inherit;
        display: $display;
        font-family: 'Icons';
        -webkit-font-smoothing: antialiased;

        @if $type == burger {
            content: 'b';
            font-size: 70px;
            line-height: 37px;
        } @else if $type == facebook {
            content: 'f';
            font-size: 24px;
            line-height: 24px;
        } @else if $type == twitter {
            content: 't';
            font-size: 24px;
            line-height: 24px;
        } @else if $type == youtube {
            content: 'y';
            font-size: 24px;
            line-height: 24px;
        }
    }

    span {
        display: none;
    }
}

With this Mixin in place we can just call it and create our Twitter icon like that:

.twitter-icon {
    @include icon(twitter);
}

Be default the before pseudo element and display block is used. If we would want to change that we can do it like this:

.twitter-icon {
    @include icon(twitter, after, inline-block);
    margin-left: 10px;
}

This would result in the following CSS code:

.twitter-icon {
    margin-left: 10px;
}

.twitter-icon:after {
    color: inherit;
    display: inline-block;
    font-family: 'Icons';
    -webkit-font-smoothing: antialiased;
    content: 't';
    font-size: 24px;
    line-height: 24px;
}

.twitter-icon span {
    display: none;
}

If you want to use Entypo for example, a very popular Icon Font, you have to watch out for a little thing. Entypo and a lot of other Icon Fonts don’t give you a simple text for the content property, they instead give you a Unicode. But you can still use this Mixin you just have to escape the code it.

This is what you get from Entypo:

And this is how you need to write your SCSS Mixin it to make it work:

content: '\1F50D';

I hope this helps you using Icon Fonts in your projects and makes your life a little bit easier.

Hamburg, 2. Januar 2014. Typisches Hamburger Regenwetter auf dem Weg zur Arbeit. Was ein Start in den ersten Arbeitstag im neuen Jahr und beim neuen Arbeitgeber.

Hamburg, 3. Januar 2014, auf dem Weg zur Arbeit. Ich laufe morgens zwar nicht direkt an diesem Ausblick vorbei, konnte ihn aber von weitem schon sehen und habe dann einen kleinen Umweg gemacht weil ich noch etwas Zeit hatte und einfach nicht widerstehen konnte. Hat sich gelohnt, oder?

Als ich mir Mitte letzten Jahres einen Gaming PC anschaffte hatte ich ja noch keine Ahnung welche weitreichenden Folgen das haben würde. Ich nutzte anfangs mein ohnehin schon vorhandenes Cinema Display auch zum Spielen. Nach einer Weile steigerten sich meine Ansprüche aber und ich schielte zu einem Gaming Monitor: 24 Zoll, schnelle Reaktionszeit und hohe Wiederholungsrate. Das klang gut und nach einem kleinen Stups von Lukas habe ich dann einen BenQ XL2420T bestellt. Das Umstecken zwischen PC und MacBook nervte eh und konnte so keine Dauerlösung sein. Außerdem wollte ich gerne irgendwann mal die Möglichkeit haben eine Grafikkarte kaufen zu können, die nicht zwingend einen Mini Display Port bietet – Das schränkt die Auswahl nämlich ganz schön ein.

Nun gut, das Cinema Display wanderte dann mit Erhalt des Gaming Monitors erstmal auf den Fußboden in eine Ecke und das MacBook habe ich nur noch ohne externes Display benutzt. Es stand also die Frage im Raum wie es weiter gehen sollte. Cinema Display verkaufen oder etwas an meiner Schreibtischsituation ändern? Ich tat letzteres und kaufte mir eine Ansatzplatte für meinen GALANT IKEA Schreibtisch. Das sind noch mal 60cm extra und bietet damit genau so viel Platz wie ich brauche. Ich bin sehr zufrieden mit meinem neuen Schreibtischsetup und so kann ich ohne Probleme zwischen MacBook und Gaming PC wechseln.

Auch wenn Tatjana und mein Silvester geprägt von Krankheit war, bzw. noch ist, möchten wir euch allen ein frohes neues Jahr 2014 wünschen.
Lasst es euch gut gehen. :)

Hallo ihr Lieben! Ich wünsche euch und euren Familien frohe Weihnachten und ein paar besinnliche Tage. Genießt sie und macht euch nicht so viel Stress. :)