Font Awesome in Photoshop nutzen

Icon-Fonts sind eine tolle Sache. Keine lästigen PNG-Files mehr aus Photoshop exportieren, keine Sprite-Positionen im CSS notieren und keine Probleme mehr, wenn sich die Farbe der Icons später ändern soll. „Font Awesome“ ist eine der beliebtesten Icon-Fonts und ebenfalls kompatibel für Bootstrap. Wie man die Schrift auf seiner Website einbindet, wird auf vielen Seiten gut beschrieben, wie aber kann man sie auch für das nächste Screendesign in Photoshop nutzen?


Font Awesome in Photoshop verwenden

Font Awesome Photoshop Palette
Icon kopieren, Schrift auswählen, fertig.
  • Das ganze Paket via fortawesome.github.io/Font-Awesome downloaden und entpacken
  • Im Ordner „font“ findet ihr eine .otf-Datei, diese installiert ihr bzw. fügt sie zu eurem Schriftverwaltungsprogramm hinzu. Die Schrift sollte nun einsatzbereit sein
  • Damit ihr sie auch in eurem nächsten Design nutzen könnt, muss das gewünschte Icon zuerst von diesem Cheatsheet kopiert werden.
  • Achtet darauf, dass nicht der Unicode, sondern wirklich nur das Icon selbst kopiert wird.
  • Nun müsst ihr in Photoshop eine neue Textebene anlegen, das Icon von der Zwischenablage einfügen und die Schrift „Font Awesome“ wählen
  • Das Icon sollte nun sichtbar sein

Nun könnt ihr das Icon beliebig groß darstellen, die Farbe ändern, Ebeneneffekte darauf anwenden und viel mehr. Wie in CSS3 eben auch. Viel Spaß!

  • Rebecca

    Hallo, schönes Tutorial! Was muss man aber machen, wenn man das Icon umgefärbt wieder einbinden will?

    Bzw. geht es überhaupt so zu machen, dass man das Icon beim einbinden (im Code) farbig machen kann?

    Über eine Antwort würde ich mich sehr freuen :)

  • William Keluman

    Hallo Rebecca, du kannst die Icons ganz normal via CSS einfärben – das ist ja der Vorteil von Icon-Fonts. Einfach einen Selektor drauf und dem ganzen einen Farbwert zuweisen, fertig! :-)

  • Pingback: Websites einfach mit Retina Icons bereichern · Siteway Blog()

  • Pingback: Websites einfach mit Retina Icons bereichern · Siteway Blog()