Stackicons: Mehr mit Icon Fonts

Der folgende Text ist ein Gastbeitrag von Parker Bennett. Während Icon-Schriftarten effizient, einfach zu bedienen und skalierbar sind und all das, ist einer der klassischen "Nachteile" davon, dass das Icon nur eine Farbe haben kann. Parker hat ein brandneues Projekt, das dieses Problem auf einfache und clevere Weise löst. Ich überlasse es ihm, es Ihnen vorzustellen.

Auch wenn die Zukunft von Icons wahrscheinlich SVG sein wird, bieten Icon-Schriftarten hier in der Gegenwart immer noch eine überzeugende Alternative – mit super einfacher Gestaltung von Farbe, Größe, Textschatten, Hover-Effekten und mehr nur mit CSS. Icon-Schriftarten sind immer noch großartig.

Ein großer Vorteil von SVG gegenüber Icon-Schriftarten ist die volle Farbe. Aber Icon-Schriftarten müssen nicht auf eine einzige Farbe beschränkt sein. Durch Überlappen von zwei oder mehr Elementen können wir einzigartige "mehrfarbige" Icons mit einem modernen Flat-Look erstellen. Wenn Sie jemals zweifarbig oder im Siebdruck gedruckt haben, ist es eine ähnliche Idee.

Ich nenne sie Stackicons.

Für jede Farbe verwenden wir ein separates Pseudo-Element und dann absolute Positionierung, um sie übereinander zu stapeln. (Wenn Sie mehr als zwei Farben wünschen, kostet es Sie einen nicht-semantischen Span.)

/* @font-face to load icon font... */

/* horizontal button row: inline-block vs float makes positioning easier using text-align */

/* any class that starts with "st-icon-" */
[class^="st-icon-"] {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  /* child elements absolute */
  position: relative;
  /* remove inline-block white-space */
  margin-right: -.16em; /* 5px */
  /* if not already universally applied */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* padding here for text, icons replicate this using size and position:absolute - padding makes touch-target bigger */
  padding: 0.143em;
  /* units used in font: 1em = 2048, icons 2400 wide, so icons are 1.171875em (2400/2048). Add padding x2 to get size: */
  height: 1.45788em;
  width: 1.45788em;
  font-size: 1.815em;
  /* text hidden old-school */
  text-align: left;
  text-indent: -9999px; }

/* position:absolute stacks pseudo elements - extra <span> in markup = 2 extra pseudo elements */
[class^="st-icon-"]:before,
[class^="st-icon-"]:after,
[class^="st-icon-"] span:before,
[class^="st-icon-"] span:after {
  display: block;
  position: absolute;
  white-space: normal;
  /* match padding above */
  top: 0.143em;
  left: 0.143em;
  /* undo text hidden */
  text-indent: 0;
  /* inherits size from parent, ems cascade */
  font-size: 1em;
  font-family: "Stackicons-Social";
  font-weight: 400 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  /* screenreaders */
  speak: none;
  /* transitions here */ }

.st-icon-amazon:before {
  /* character code - unicode private use area */
  content: "\e079"; /* black "a" */
  color: black; }

.st-icon-amazon:hover:before {
  color: #626262; }

.st-icon-amazon:after {
  content: "\e080"; /* orange smile */
  color: #ff9900; }

.st-icon-amazon:hover:after {
  color: #ffbd59; }

Mit rgba-Werten können wir sogar etwas Farbvermischung betreiben, um mehr Farben zu erhalten. Wenn wir wirklich die Grenzen ausreizen wollen, können wir -webkit-background-clip: text verwenden, um Icons einen -webkit-linear-gradient-Hintergrund zu geben.

Ja, es ist ein bisschen "hacky": Es erfordert etwas Design-Voraussicht und die Fähigkeit, eine Icon-Schriftart zu generieren. Es gibt mehr bewegliche Teile zu verwalten. Aber es bietet auch viel Flexibilität, besonders mit Sass-Variablen.

Stackicons

Stackicons-Social

Um zu zeigen, wie es funktioniert, habe ich eine kostenlose, Open-Source Icon-Schriftart, Stackicons-Social, erstellt und ein Sass "Construction Kit" entwickelt, um den CSS-Code für sowohl einfarbige Icons als auch "mehrfarbige" Versionen von über 60 sozialen Marken zu generieren.

Stackicons-Social

nur-Iconquadratischabgerundet1abgerundet2abgerundet3rund

mehrfarbig

Stackicons-Social anzeigen

Ich habe auch eine Reihe von Button-Formen in die Schriftart integriert, von quadratisch bis rund (plus nur-Icons) und habe Klassen, die die Form im laufenden Betrieb überschreiben. Runde Icons gewünscht? Fügen Sie einfach die Klasse .st-shape-circle hinzu. iOS-Stil? .st-shape-rounded3.

Probieren Sie es auf CodePen aus

Zusammenführung mit Sass

Hinter den Kulissen gibt es eine Gruppe von .scss _partial-Dateien, die Sass kompiliert. Wenn Sie mit Sass vertraut sind, können Sie Dinge durch Ändern von Variablen in diesem "Construction Kit" umfassend anpassen.

• fonts-stackicons-social – Pfad zur Stackicons-Social-Schriftart.
• colors-social–2014 – Farbvariablen für soziale Marken.
• unicodes-stackicons-social – Unicode-Zeichen der Schriftart, die in Variablen abstrahiert sind.
• construction-kit-stackicons-social – Hier generieren wir Standardwerte für Icon-Größe, Margin, Padding, Form, Farbe, Hover-Stil usw. (Spielen Sie hier.)
• css-defaults-stackicons-social – Dies erledigt die CSS-Arbeit, um jede .st-icon-($brand)-Klasse zu erstellen.*
• override-shapes-stackicons-social – Ermöglicht es Ihnen, die Button-Form bei einfarbigen Icons mit Klassen zu überschreiben: st-shape-square bis st-shape-circle, plus st-shape-icon.*
• override-colors-stackicons-social – Einige Beispiele für "Farbstile" für einfarbige Icons zur Demonstration verschiedener Optionen. Viel zusätzlicher CSS-Code, daher ist er standardmäßig auskommentiert.*
• multi-color-kit-stackicons-social.scss – Ähnlich wie "construction-kit" oben, aber für die Klasse .st-multi-color: generiert Standardform, Farbstil usw.
• multi-color-css-stackicons-social.scss – Ähnlich wie "css-defaults" oben, erledigt dies die CSS-Arbeit, um jede mehrfarbige .st-icon-($brand)-Klasse zu generieren.*
• multi-color-override-shapes-stackicons-social – Dies ermöglicht es Ihnen, Icon-Formen mit Klassen auf mehrfarbigen Icons zu ändern.*

* Da Sass keine Variablen in Variablen erlaubt, werden hier viele @if-Anweisungen verwendet, um die .st-icon-($brand)-Klassen zu generieren. Hässlich, aber mäßig wartbar. Es gibt mehrere @each-Anweisungen, die die auszugebenden Marken auflisten. Idealerweise würden Sie diese Listen durchgehen und bearbeiten, um die CSS-Ausgabe auf die benötigten Marken zu beschränken.

Selbst basteln

Es gibt einige großartige kostenlose Ressourcen zur Erstellung von Icon-Schriftarten, darunter icomoon.io und fontello.com. Ich benutze Adobe Illustrator und Glyphs auf dem Mac. (Glyphs Mini ist eine günstigere Option, die die Einheiten pro Em auf 1000 begrenzt. Sie bieten auch Studentenpreise.) Um die Web-Schriftartversionen zu generieren, empfehle ich FontPrep, das Brian Gonzalez gerade Open Source gemacht hat. FontSquirrel ist eine weitere gute kostenlose Option. (Wenn Sie an weiteren Workflow-Details interessiert sind, lassen Sie es mich in den Kommentaren wissen.)

Sie sollten sich auch some random dude (P.J. Onori) und sein iconic-Projekt ansehen. Er hat auch einige hilfreiche Tipps zur Verwendung von Icon-Schriftarten.

Wie immer, wenn Sie Fragen, Kommentare oder Korrekturen haben, können Sie mir eine E-Mail an parker@parkerbennett.com senden.