Heute brauchte ich einerseits das Apple Logo von Font Awesome und andererseits brauchte ich es in Farbe. Jetzt ist das Logo an sich ja weiß/grau, was auf dem meistens weißen/hellgrauen Hintergrund einer Seite nicht so gut sichtbar ist. Eine Alternative ist das bunte Logo aus den Achtzigern damals und zum Glück gibt es CSS Farbverläufe.

 1.fa-apple.fa-retro {
 2    transition: .5s ease-out color;
 3    color: #16161d;
 4    background-clip: text;
 5    background-image:linear-gradient(
 6                      to bottom,
 7                      #70c25c 0%, #70c25c 30%,
 8                      #ffc04a 30%, #ffc04a 42.5%,
 9                      #fc903d 42.5%, #fc903d 55%,
10                      #e94752 55%, #e94752 67.5%,
11                      #a954a5 67.5%, #a954a5 80%,
12                      #00afe0 80%, #00afe0 100%);
13}

Was macht das ganze? Zuerst lege ich eine transition fest, welche die Farbe animiert. Das ist bei Hover oder so immer ganz praktisch. Die Farbe vom Icon ist per default erstmal schwarz. Den Hintergrund clippen wir da, wo das Logo verläuft und schließlich legen wir für den Hintergrund einen Farbverlauf fest. Kurz gesagt: Der Vordergrund ist ein schwarzes Apple Logo, der Hintergrund ist ein buntes Apple Logo.

Um das bunte Logo sichtbar zu machen, setzen wir einfach die Vordergrundfarbe transparent.

1.fa-apple.fa-retro:hover {
2    color: transparent;
3}

Et voilá, ein buntes Apple Logo mit Webfonts und CSS3!

Falls ihr in dem Plunker-Link nun lauter bunte oder schwarze Kästchen seht, habt ihr auch den großen Nachteil von der Variante bemerkt: background-clip: text gibt es nur in Webkit-basierten Browsern, also nicht im Firefox. Außerdem kann Modernizr nicht verlässlich detektieren, ob der Browser diese Property unterstützt. Also entweder ihr benötigt nur Chrome und Safari, oder naja, Pech. Leider. Oder 90er Style, einfach Bilder nehmen.