Blog

Font-Icons – Super Lösung für Icons auf der Website


Font-Icons für Icons mit top Qualität und super Performance

Font-Icons sind, meiner Meinung nach, die beste Lösung um Icons auf der Website zu platzieren. Die Vorteile im Überblick:

  • Cross-Browser kompatibel
  • Höchste browserfähige Auflösung
  • Nur ein Request für alle Icons
  • Als Schriftart verwendbar (Farbe, Größe, etc.)
  • Kleine Datenmenge

Wie funktionieren Font-Icons?

Hat man sich für eine Auswahl an Icons entschieden, generiert man sich eine Schriftart (siehe unten) und bindet diese via CSS in das Projekt ein.

Ich empfehle, zum generieren der Font-Icons, ein Tool zu benutzen, dass einem die Icons auch gleichzeitig als .class verfügbar macht.

Die Font-Icons bestehen üblicherweise aus den Formaten: .svg, .eot, .ttf, .woff und werden je nach Browserkompatiblität verwendet. Beim Skalieren auf dem Handy sieht man sehr schön den qualitätsvorteil von Font-Icons.

Wo bekomme ich kostenlose Icons her?

Glücklicherweise haben wir einen Artikel über kostenlose Icons online:-)

Natürlich könnt ihr auch nach Herzenslust selbst .svg erstellen. Das beste kostenlose Programm dafür: Inkscape.

Wie erstelle ich aus meinen Icons eine Schriftart?

Ich empfehle das Tool IcoMoon-App zu benutzen. Hier könnt ihr eure .svgs hochladen und daraus easy eine Schriftart machen. Das Tool generiert euch folgenden Ordner zum Download:

Wichtig sind der fonts Ordner und der Inhalt der style.css:

@font-face {
    font-family: 'freshIcons';
    src:url('fonts/freshIcons.eot');
}
@font-face {
    font-family: 'freshIcons';
    src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8...ALAAB9AAQ=) format('woff'),
    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAN...CAAAAAM5rJMI=) format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: 'freshIcons';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-quotes-left, .icon-checkmark, .icon-plus, .icon-minus, .icon-shuffle, .icon-iconmonstr-link-icon, .icon-iconmonstr-checkbox-icon, .icon-iconmonstr-checkbox-9-icon, .icon-iconmonstr-trash-can-icon, .icon-iconmonstr-menu-icon, .icon-iconmonstr-map-5-icon, .icon-iconmonstr-magnifier-icon, .icon-iconmonstr-sharethis-icon, .icon-iconmonstr-info-6-icon {
    font-family: 'freshIcons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-quotes-left:before {
    content: "\e000";
}
.icon-checkmark:before {
    content: "\e001";
}
.icon-plus:before {
    content: "\e002";
}
.icon-minus:before {
    content: "\e003";
}
.icon-shuffle:before {
    content: "\e004";
}
.icon-iconmonstr-link-icon:before {
    content: "\e005";
}
.icon-iconmonstr-checkbox-icon:before {
    content: "\e006";
}
.icon-iconmonstr-checkbox-9-icon:before {
    content: "\e007";
}
.icon-iconmonstr-trash-can-icon:before {
    content: "\e008";
}

Mit den klassennamen können wir das Icon jetzt einfach in einem span benutzen:

<span class="icon-iconmonstr-checkbox-icon"></span>

Fertig! Ab jetzt können wir die Farbe und Größe ganz einfach wie bei einer Schriftart ändern.

Du magst den Post?
Loading...Loading...

Blog