5 Anwendungsfälle für Icon Fonts

Der folgende Beitrag wurde von Tim Pietrusky verfasst. Tim weiß, dass diese Seite schon lange ein Verfechter der Verwendung von Schriftarten für Icons ist, und hatte eigene interessante Anwendungsfälle zu teilen. Um sich bei der Erstellung der Demos das Leben leichter zu machen, hat er einen kostenlosen Dienst für das Hosting von Icon-Schriftarten erstellt. Das ist auch ein schönes Geschenk an die Community. Ich überlasse es ihm, Ihnen davon zu erzählen…

Icon Fonts sind großartig

• Sie können sie mit CSS ordentlich aufpeppen und sie stört das nicht
• Sie sehen auf jedem Display und jeder Auflösung gut aus
• Es gibt nur eine einzige HTTP-Anfrage für eine beliebige Anzahl von Icons

Schauen wir uns 5 typische Anwendungsfälle für Icon Fonts an.

Bevor wir anfangen

Wir werden keine Vendor-Präfixe verwenden, um den Beispielcode sauber und lesbar zu halten. Wir werden Dinge wie Animationen, Übergänge und Transformationen verwenden, die alle Vendor-Präfixe benötigen, um die beste Browserunterstützung zu gewährleisten. Wie Sie mit Vendor-Präfixen umgehen möchten, liegt bei Ihnen.

Wie Sie in den Beispielen sehen werden, verwende ich den Icon-Font-Hosting-Dienst weloveiconfonts.com. Dies ist mein eigenes Projekt. Hier ist die Geschichte: Ich wollte einen Artikel über Icon Fonts schreiben und suchte nach einem kostenlosen Icon-Font-Hosting-Dienst, fand aber keinen. Also erstellte ich diesen Dienst, um diesen Artikel schreiben zu können.

1. CSS-Loader

Es gibt ziemlich viele fantastische, reine CSS-Loader und Sie können sogar Ihre eigenen unter cssload.net erstellen. Eine weitere Möglichkeit, dies zu tun, sind Icon Fonts. Sie können ein Zeichen verwenden, das wie ein Ladezeichen aussieht, und es mit CSS animieren.

Das ist das grundlegende HTML. Die ersten drei Loader sind Kinder von div.wrapper und einzelne Elemente. Das vierte (div.complex) ist eine Kombination aus zwei Icons.

<div class="wrapper">
  <span class="fontelico-spin1"></span>
  <span class="fontelico-spin3"></span>
  <span class="fontelico-spin5"></span>
</div>

<div class="complex">
  <span class="fontelico-emo-devil"></span>
  <span class="fontelico-spin4"></span>
</div>

Importieren Sie die Icon-Schriftart Fontelico in Ihr CSS

@import url(http://weloveiconfonts.com/api/?family=fontelico);
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}

Fügen Sie die Animation namens load zu den Elementen hinzu, die sie herumdreht (von 0deg bis 360deg), ein wenig skaliert und die Farbe ändert.

/* Normal (left) */
span {
  float: left;
  text-align: center;
  margin: 0 5em;
  animation: load 1.337s infinite ease-out reverse;
}
/* Fast (center) */
.wrapper span:nth-child(2) {
  animation: load .5s infinite linear;
}
/* Steps (right) */
.wrapper span:nth-child(3) {
  animation: load 1.25s infinite steps(18, end) forwards;
}
@keyframes load {
  0% {
    transform: rotate(0) scale(1, 1);
    color: rgba(0, 0, 0, .5);
  }
  10% { color: rgba(0, 120, 0, .5); }
  20% { color: rgba(0, 120, 120, .5); }
  30% { color: rgba(120, 120, 0, .5); }
  40% { color: rgba(0, 0, 120, .5); }
  50% {
    transform: rotate(180deg) scale(1.85, 1.85);
    color: rgba(120, 0, 0, .5);
  }
  100% {
    transform: rotate(360deg) scale(1, 1);
    color: rgba(0, 0, 0, .5);
  }
}

Der letzte Loader (div.complex) kombiniert zwei Icons und stapelt sie übereinander. Das erste Kind ist das Teufel-Element (mit der Animation namens rotate) und das zweite Kind ist das Spin-Icon (mit der Animation namens scale).

.complex span:nth-child(1),
.complex span:nth-child(2) {
  position: absolute;
  margin: 0;  
  width: 1em;
  height: 1em;
}
/* Devil icon  */
.complex span:nth-child(1) {
  animation: load 1.25s infinite steps(18, end) forwards;
}
/* Spin icon */
.complex span:nth-child(2) {
  font-size: 3em;
  left: -.35em;
  top: -.35em;
  color: rgba(0, 0, 0, .3);
  animation: devil 3s infinite linear reverse forwards;
}
@keyframes devil {
  0% {
    transform: scale(-1.85, 1.85);
  }
  50% {
    transform: scale(1.85, -1.85);
  }
  100% {
    transform: scale(-1.85, 1.85);
  }
}

Demo auf CodePen

2. SocialCount trifft auf Stil

Menschen nutzen gerne Social-Sharing-Buttons auf ihren Websites, um Besuchern das Teilen zu erleichtern. Aber wenn Sie Facebook, Twitter und Google+ kombinieren, haben Sie eine leere Cache-Größe von 309 KB. Hier kommt das SocialCount jQuery Plugin ins Spiel. SocialCount ist progressiv verbessert, lazy geladen und mobilfreundlich.

Das Standard-Styling ist einfach und der iframe, der die Buttons enthält, ist winzig. Peppen wir diese Buttons mit etwas schickem CSS auf.

Das ist das HTML, das mit dem SocialCount Markup Generator erstellt wurde. Nur eine ungeordnete Liste mit Links und Icons.

<ul
  class="socialcount"
  data-url="http://www.google.com/"
  data-counts="true"
  data-share-text="Google is a search engine">
 
  <li class="facebook">
    <a href="https://#/sharer/sharer.php?u=http://www.google.com/" title="Share on Facebook">
      <span class="count entypo-thumbs-up"></span>
    </a>
  </li>

  <li class="twitter">
    <a href="https://twitter.com/intent/tweet?text=http://www.google.com/" title="Share on Twitter">
      <span class="count entypo-twitter"></span>
    </a>
  </li>

  <li class="googleplus">
    <a href="https://plus.google.com/share?url=http://www.google.com/" title="Share on Google Plus">
        <span class="count entypo-gplus"></span>
    </a>
  </li>

</ul>

Importieren Sie die Icon-Schriftart Entypo in Ihr CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
  font: 2.5em/1.9em 'entypo', sans-serif;
}

Wir überschreiben das Standard-Styling von SocialCount durch

• Hinzufügen einer Übergangszeit
• Skalieren des iframes
• Festlegen eines benutzerdefinierten Hintergrunds für die Buttons

.socialcount {
  > li {
    width: 33%;
    border-radius: 0;
    transition: all .3s ease-in-out;
    cursor: pointer;
   
    &:hover [class*="entypo-"]:before {
      opacity: 0;  
    }
  }
 
  iframe {
    transform: scale(1.65, 1.65);    
  }
 
  .button {
    top: 50%;
    margin: -.75em 0 0 0;
    height: 2em;
  }
 
  .facebook {
    background: rgba(59, 89, 152, .7);
  }
   
  &.like .facebook iframe {
    width: 8em;
  }
 
  .twitter {
    background: rgba(0, 172, 237, .7);  
  }
 
  .googleplus {
    background: rgba(172, 0, 0, .7);  
  }
}

Demo auf CodePen

3. Erweiterte Listen

Die folgenden drei Beispiele basieren alle auf diesem einfachen HTML.

<div>
  <h2>Title</h2>
  <ul class="style">
    <li data-text="">Text</li>
    <li data-text="">Text</li>
    <li data-text="">Text</li>
  </ul>
</div>

Importieren Sie die Icon-Schriftart Font Awesome in Ihr CSS

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

Fügen Sie das Standard-Styling für Listen, Listenelemente, Pseudo-Elemente und den Button hinzu. Anstatt eine Klasse zu verwenden, um das Icon auf den Listenelementen zu setzen, ändern wir die content-Eigenschaft des Elements und erstellen so ein Pseudo-Element.

ul {
  list-style: none;
  padding: 0;
   
  li {
    position: relative;
    min-height: 2em;
    padding: .3em .3em .3em 1.5em;
    transition:
      background .3s ease-in-out,
      color .3s ease-in-out,
      box-shadow .1s ease-in-out,
      height .25s ease-in-out
   ;
   
    button {
      position: absolute;
      left: 1.45em;
      bottom: .35em;
      opacity: 0;
      height: 0;
      border: none;
      font-size: .8em;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
   
    &:before {
      position: absolute;
      top: .425em;
      font-family: 'FontAwesome', sans-serif;
      margin: 0 .35em 0 -1.35em;
      vertical-align: bottom;
    }
    &:hover {
      button {
        opacity: 1;
        height: 2em;
      }
     
      &:before {
        color: rgba(255, 255, 255, 1);
        right: 0;
        transform: scale(2.5, 2.5) translate(-.25em, .15em);
      }
      &:after {
        position: absolute;
        content: attr(data-text);
      }
    }
  }
}

3.1 Stuff You Love

Das erste Beispiel ist sehr einfach. Ein Herz anstelle des Standard-Listenstils und ein besonderer Hover-Effekt: Das Icon wird nach rechts verschoben und das ::after-Pseudo-Element erhält den Text des Datenattributs data-text.

.love {
  li {  
    &:before {
      /* fontawesome-heart */
      content: "\f004";
    }
    &:before,
    &:after {
      color: rgba(220, 20, 20, .6);
    }
    &:hover {
      background: rgba(220, 20, 20, .6);
   
      &:after {
        width: 2em;
        right: .445em;
      }
    }
  }
}

3.2 Downloads

Dies ist eine benutzerdefinierte Downloadliste mit erweitertem Markup: Ein Link und ein Button für jedes Listenelement. Der Button ist standardmäßig ausgeblendet und wird beim Hovern angezeigt.

.downloads {
  li {
    border-bottom: .15em solid rgba(0, 0, 0, .3);
   
    &:before {
      /* fontawesome-download-alt */
      content: "\f019";
      color: rgba(50, 50, 50, .5);
    }
    &:hover {
      background: rgba(0, 140, 0, .7);
      height: 4em;
   
      &:after {
        right: .35em;
      }
     
      &:before {
        color: rgba(255, 255, 255, .2);
      }
    }
  }
}

3.3 Ihr Konto

Ein UI-Konzept für ein Benutzermenü. Wenn Sie mit der Maus über ein Listenelement fahren, wird das Icon nach rechts verschoben und der Box-Shadow füllt den gesamten Hintergrund. Jedes Listenelement hat sein eigenes Icon, basierend auf dem :nth-child-Selektor und der content-Eigenschaft.

.account {
  padding: .75em;
  border: .15em solid rgba(0, 0, 0, .2);
  background-color: rgba(0, 0, 0, .7);
  background-image: radial-gradient(center, ellipse cover, rgba(104,104,104,0.6) 0%,rgba(23,23,23,0.7) 100%);
  box-shadow: inset 0 0 .35em 0 rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .6);
  backface-visibility: hidden;
   
  li {  
    cursor: pointer;
       
    &:nth-child(1):before {
      /* fontawesome-heart-empty */
      content: "\f08a";
    }
    &:nth-child(2):before {
      /* fontawesome-glass */
      content: "\f000";
    }
    &:nth-child(3) {
      margin-bottom: 1em;
     
      &:before {
      /* fontawesome-comment */
        content: "\f075";
      }
    }
    &:nth-child(4) {
      margin-bottom: .5em;
     
      &:before {
      /* fontawesome-cog */
         content: "\f013";
      }
    }
    &:nth-child(5):before {
      /* fontawesome-signout */
      content: "\f08b";
    }
    &:hover {
      color: rgba(255, 255, 255, 1);
      padding-left: 1.5em;
      box-shadow: inset 0 0 0 10em rgba(255, 255, 255, .5);
   
      &:before {
        color: rgba(255, 255, 255, 1);
        transform: none;
      }  
    }
  }
}

Demo aller drei Listentypen auf CodePen

4. Emocons.js jQuery Plugin

Emojons.js ist ein jQuery-Plugin, das den Inhalt eines Elements nach bestimmten Zeichenfolgen durchsucht. Alle Treffer werden durch ein Span und die HTML-Klasse des entsprechenden Icons ersetzt. Zum Beispiel eine Chat-App

<div class="chat">
    :D :) ;) :'( :o :/ :( B) :P :|
    :beer: :devil: :shoot: :coffee: :thumbsup: :angry: :ueber-happy:
</div>

Rufen Sie dann die Emocons.js-Plugin-Methode für Ihr Element auf

$('.chat').emocons();

Alle Elemente innerhalb des Chats werden nun in so etwas wie das hier verwandelt

<span class="fontelico-emo-grin go" title=":D"></span>

Importieren Sie die Icon-Schriftart Fontelico in Ihr CSS

@import url(http://weloveiconfonts.com/api/?family=fontelico);
[class*="fontelico-"]:before {
  font-family: 'fontelico', sans-serif;
}

Wenn Emocons.js einen String in ein Emoticon umwandelt, fügt es der Span-Elementklasse go (die eine Animation aufruft) hinzu.

.go {
  animation: hey .55s 1 linear;
}
@keyframes hey {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.85, -1.85);
  }
  100% {
    transform: scale(1, 1);
  }
}

Einige der Emoticons erhalten einen besonderen Stil (z. B. eine Farbänderung) oder etwas wird über ein ::after-Pseudo-Element hinzugefügt.

.fontelico-emo-devil {
  color:rgba(180, 0, 0, .9);
}
.fontelico-emo-beer:after {
  box-shadow:
    -.475em .75em 0 .275em rgba(220, 220, 0, 1),
    -.185em .675em 0 .175em rgba(220, 220, 0, 1)
  ;    
}
.fontelico-emo-coffee:after {
  box-shadow:
    -.475em .78em 0 .235em rgba(222, 184, 135, 1),
    -.215em .715em 0 .155em rgba(222, 184, 135, 1)
  ;    
}
.fontelico-emo-shoot:after {
  border-radius: .15em;
  box-shadow: .315em .525em 0 .1em rgba(0, 0, 0, 1);    
}
.fontelico-emo-angry:after {
  border-radius: .15em;
  box-shadow: -.695em .455em 0 .085em rgba(0, 220, 0, .6);
  z-index: 2;
}

Demo auf CodePen

5. Parallax Movie #1337

Das letzte Beispiel ist nur zum Spaß. Es ist nur ein Experiment, um einen endlosen Parallax-Film mit einer einzigen Icon-Schriftart zu erstellen. Das HTML besteht aus vielen Elementen, um die Szene zu erstellen

• Die Kulisse: Himmel, Boden, Nacht und Sonne
• Festes Element: Fahrrad
• Animierte Elemente: Bäume, Giraffe, Einkaufswagen, Gebäude und Heliport

<div class="night"></div>
<div class="wrapper">
  <div class="sun">
    <div class="maki-fast-food"></div>
  </div>
 
  <div class="sky"></div>
  <span class="maki-bicycle"></span>
   
  <span class="maki-tree-1" data-child="1"></span>
  <span class="maki-tree-1" data-child="2"></span>
  <span class="maki-tree-1" data-child="3"></span>
   
  <span class="maki-giraffe"></span>
  <span class="maki-grocery-store"></span>
   
  <span class="maki-commerical-building" data-child="1"></span>
  <span class="maki-commerical-building" data-child="2"></span>
   
  <span class="maki-heliport"></span>
   
  <div class="ground"></div>
</div>

Importieren Sie die Icon-Schriftart Maki in Ihr CSS

@import url(http://weloveiconfonts.com/api/?family=maki);
[class*="maki-"] {
  position: absolute;
  margin: 0;  
  color: #fff;
  font-size: 2em;
}
[class*="maki-"]:before{
  font-family: 'maki', sans-serif;
}
*:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  z-index: -1;
  width: 0;
  height: 0;
}

Der Wrapper rotiert die gesamte Szene um -3deg.

.wrapper {
  height: 140%;
  width: 120%;
  transform: rotate(-3deg) translate(-10%, -15%);    
}

Wenn die Sonne untergeht, geht die Nacht auf.

.night {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  animation: night 45s infinite forwards;
}
@keyframes night {
  0%, 30%, 100% {background:rgba(0, 0, 0, 0);}  
  55% {background: rgba(0, 0, 0, .6);}
}

Himmel und Boden verwenden beide die gleiche background-position-Animation, aber mit unterschiedlichen Geschwindigkeiten.

.sky {
  position: relative;
  z-index: 0;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png);
  height: 50%;    
  width: 100%;
  animation: rollin-bg 25s linear infinite forwards;
}
.ground {
  position: absolute;
  z-index: 1;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
  height: 50%;    
  width: 100%;
  animation: rollin-bg 7s linear infinite forwards;
}
@keyframes rollin-bg {
  0% { background-position: 100%; }  
  100% { background-position: 0; }
}

Ein Element entlang eines Kreises bewegen ist ein fantastischer Artikel von Lea Verou, der hier verwendet wird, um die Burger-Sonne zu animieren.

.sun {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 10%;
  width: 2em;
  height: 2em;
  font-size: 4em;
  line-height: 1;
  animation: circle 45s linear infinite;
  transform-origin: 50% 3.85em;
}
.sun [class*="maki-"] {
  color: rgba(240, 180, 0, .2);
  text-shadow: 0 0 .35em rgba(240, 240, 0, .7);
}
.sun > div {
  animation: inner-circle 45s linear infinite;
}
@keyframes circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes inner-circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

Dies ist das einzige Element, das keine Animation hat. Aber es sollte so aussehen, als würde es sich bewegen.

.maki-bicycle {
  left: 50%;
  z-index: 4;
  margin: -.85em 0 0 -.5em;
  color: rgba(30, 30, 140, .95);
}

Und hier sind die animierten Elemente, die alle die gleiche rollende Animation mit unterschiedlicher Geschwindigkeit verwenden.

.maki-tree-1[data-child="1"] {
  margin: -1em 0 0 5%;
  z-index: 5;
  animation: rollin 5s linear infinite;
  font-size: 2.4em;
  color: rgba(0, 110, 0, .8);
}
.maki-tree-1[data-child="2"] {
  margin: -1em 0 0 85%;  
  z-index: 2;
  animation: rollin 12s linear infinite;
  font-size: 1.6em;
  color: rgba(0, 110, 0, .5);
}
.maki-tree-1[data-child="3"] {
  margin: -1em 0 0 25%;  
  z-index: 2;
  animation: rollin 17s linear infinite;
  font-size: 1.2em;
  color: rgba(0, 110, 0, .3);
}
.maki-giraffe {
  margin: .25em 0 0 5%;  
  z-index: 6;
  animation: rollin 12s linear infinite reverse;
  font-size: 10em;
  color: rgba(255, 255, 10, .9);
}
.maki-giraffe:after {
  right: -3em;
  content: '\e82a \e82a \e82a \e82a \e82a';
  font: .2em 'Maki', sans-serif;
  letter-spacing: .2em;
  width: 3em;
  color: rgba(0, 0, 0, .6);
  box-shadow:
    0 .45em 0 .75em rgba(255, 255, 255, .4),
    1em .35em 0 .75em rgba(255, 255, 255, .4),
    2.25em .25em 0 1.05em rgba(255, 255, 255, .4)  
  ;
  border-radius: 50%;
  transform: translate(2.3em, .55em) rotateY(-180deg);
}
.maki-grocery-store {
  margin: -.35em 0 0 5%;
  z-index: 5;
  animation: rollin 22s linear infinite;
  font-size: 4em;
  color: rgba(220, 0, 10, .7);
}
.maki-commerical-building[data-child="1"] {
  margin: -1em 0 0 5%;
  z-index: 3;
  animation: rollin 6s linear infinite;
  font-size: 7em;
  color: rgba(120, 0, 120, .8);
}
.maki-commerical-building[data-child="2"] {
  margin: -1em 0 0 5%;
  z-index: 2;
  animation: rollin 14s linear infinite;
  font-size: 4em;
  color: rgba(0, 120, 120, .4);
}
.maki-heliport {
  margin: -3.5em 0 0 2em;  
  z-index: 1;
  color: rgba(30, 30, 30, .45);
  font-size: 1.25em;
  animation: rollin 26s linear infinite reverse 2s;
}
@keyframes rollin {
  0% {margin-left:105%}  
  100% {margin-left:-15%;}
}

Demo auf CodePen

Weitere Lektüre

Danke für Ihre Zeit! Und natürlich ist das nicht alles, was Sie mit Icon Fonts machen können. Haben Sie keine Angst, selbst zu experimentieren.

• HTML für die Verwendung von Icon Fonts / Pictos zu Icon Fonts
• Markup-freie Icon Fonts mit Unicode-Range
• Animicons: Sprite-Animationen mit Icon Fonts
• Mehrfarbige Font-Face-Icons
• IcoMoon / Fontello
• Font Squirrel @font-face Generator
• Die große Liste von Flat Icons & Icon Fonts