Icons in Hülle und Fülle: Font Awesome (auch für APEX 4.x)

Application Express Community

Erscheinungsmonat	APEX-Version	Datenbankversion
August 2014	ab 4.0	ab 12.1.0.2

Veranstaltung "Enterprise APEX 5.0" im Oktober 2014

Mehr zum Thema Font Awesome, und anderen Neuerungen in APEX 5.0, erfahren Sie auf dem Oracle Database Day 12c: "Enterprise APEX 5.0".

Mit der neuen Version 5.0 definiert Oracle Application Express die Anwendungsentwicklung völlig neu. Mit dem neuen Page Designer und dem Universal Theme können Web-Anwendungen nicht nur schnell, effizient und günstig erstellt werden; diese haben darüber hinaus - out-of-the-box - ein modernes und ansprechendes Design. Web-Technologien wie HTML5 und Reponsive Web Design werden automatisch verwendet, ohne dass man sich um die Details kümmern muss.

Das ist jedoch noch nicht alles: Application Express setzt sich in den IT-Landschaften auch für größere Projekte mehr und mehr durch. Auf diesem Oracle Database Day erfahren Sie, worauf es beim Einsatz von "Enterprise APEX" ankommt und mit welchen Best Practices Sie erfolgreich sein können.

Die Veranstaltung findet im Oktober 2014 in Düsseldorf, Hamburg und München statt. Die Teilnahme ist kostenlos. Melden Sie sich gleich an!

Icons und Symbole kann man als APEX-Entwickler nicht genug haben. In vielen Fällen kann man mit einem guten Symbol mehr aussagen als mit vielen Worten. Das Erstellen von Icons fällt dagegen meist eher schwer: Die wenigsten APEX-Entwickler sind gleichzeitig Web-Designer - so findet man in den meisten APEX-Anwendungen genau die Icons, die APEX von Haus aus mitbringt.

Font Awesome erfreut sich immer größerer Beliebtheit bei Web-Entwicklern. Es bietet eine immense Fülle an Icons und Symbolen - und das Interessante an Font Awesome ist: Wie der Name schon sagt, werden die Icons als Schriftart (Font) bereitgestellt. Wozu das gut ist? Nun, Schriftarten können mit CSS-Style-Angaben weiter formatiert werden - das CSS-Attribut color legt die Farbe fest, das Attribut text-shadow bestimmt die Eigenschaften eines Schattens und es gibt natürlich noch viele mehr.

Font Awesome steht unter einer Open Source Lizenz - die Verwendung ist sowohl für Open Source als auch für kommerzielle Projekte explizit gestattet: Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.

Erste Schritte mit Font Awesome - (noch) ohne APEX

Für die ersten Gehversuche mit Font Awesome brauchen Sie noch gar kein APEX. Laden Sie Font Awesome herunter und packen Sie das ZIP-Archiv auf Ihrem Desktop-Rechner aus - bspw. in den Ordner D:\ . Die Dateien von Font Awesome werden sich anschließend unter D:\font-awesome-4.2.0 befinden. Erzeugen Sie anschließend mit einem Texteditor ebenfalls im Ordner D:\ eine HTML-Datei mit folgendem Inhalt.

<html>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.css"></style>
</head>
<body>

<h1>Hier kommen die Font Awesome Icons</h1>
<hr/>

<!-- Hier kommen die Icons hin -->

<!-- Icons Ende-->
</body>
</html>

Wenn Sie diese Seite nun im Browser öffnen, sehen Sie noch nichts besonderes ...

Abbildung 1: Grundgerüst der "Font Awesome Testseite"

Das Font Awesome Cheat Sheet gibt Ihnen einen Eindruck, welche Möglichkeiten Ihnen offen stehen. Nehmen Sie das Symbol fa-database und binden Sie es wie folgt in Ihre HTML-Webseite ein.

:
<hr/>

<!-- Hier kommen die Icons hin -->

<div class="fa fa-database"></div>

<!-- Icons Ende-->
</body>
</html>
:

Abbildung 2: Ein erstes Symbol

So weit, so gut. Verändern Sie das Symbol nun mit CSS-Anweisungen wie folgt ...

:
<!-- Hier kommen die Icons hin -->

<div class="fa fa-database"></div>
<div class="fa fa-database" style="font-size: 40px"></div>
<div class="fa fa-database" style="font-size: 40px; color: #0000cc"></div>
<div class="fa fa-database" style="font-size: 40px; color: #cc0000"></div>
<div class="fa fa-database" style="font-size: 40px; color: #cc0000; text-shadow: 2px 2px 2px #808080;"></div>

<!-- Icons Ende-->
:

Abbildung 3: Symbolvariationen

Darüber hinaus bietet Font Awesome noch eigene Symbolvariantionen an - weist man die CSS-Klassen rotate-90, rotate-180 oder rotate-270 zu, so wird das Symbol entsprechend gedreht. Die Klasse fa-spin sorgt für ein sich drehendes Symbol - hierfür ist das Datenbanksymbol natürlich weniger geeignet - fa-refresh passt dagegen besser.

:
<div class="fa fa-database fa-rotate-90" style="font-size: 40px; color: #0000cc"></div>

<hr>

<div class="fa fa-refresh  fa-spin" style="font-size: 40px; color: #0000cc"></div>
:

Abbildung 4: Noch mehr Symbolvariationen

Symbole können auch übereinandergelegt werden. Somit können aus mehreren vorhanden Symbolen neue kreiert werden. Dazu dienen die CSS-Klassen fa-stack, fa-stack-1x und fa-stack-2x.

:
<span class="fa-stack">

<span class="fa fa-database fa-stack-2x" style="color: #aa0000"></span>

<span class="fa fa-check    fa-stack-2x" style="color: #00ff00"></span>

</span>

:

Abbildung 5: Neue Symbole aus vorhandenen zusammensetzen

Man sieht, dass sich Font Awesome eine Menge an ganze Symbolen an bietet - wesentlich mehr als ein erster Blick auf das Cheat Sheet erahnen lässt. Und wie man an diesem einfachen Test erkennen kann, ist das Einbinden in eine Anwendung, ob APEX oder andere Technlologien, denkbar einfach. Überall dort, wo Sie bisher ein <img>-Tag verwendet haben, bauen Sie nun <span>- oder <div>-Tags mit den entsprechenden CSS-Anweisungen von Font Awesome ein. Die Abbildungen 6 und 7 zeigen dies anhand eines Links in einem APEX-Report.

Abbildung 6: Font Awesome Icon in einem APEX-Report als Spalten Link verwenden

Abbildung 7: Font Awesome Icon in einem APEX-Report

Und ab APEX 5.0 wird Font Awesome out-of-the-box enthalten sein - Sie können die CSS-Klassen dann sofort in Ihren APEX-Anwendungen verwenden. Wer diese Möglichkeiten auch in APEX 4.x haben möchte, muss Font Awesome vorher einbinden.

Font Awesome und APEX 4.x

Wenn Sie Zugriff auf den APEX-Webserver haben, ist das Einbinden sicherlich am leichtesten. Packen Sie das ZIP-Archiv einfach unterhalb des Verzeichnisses, in dem die statischen Dateien von APEX liegen (das "images" Verzeichnis), aus. Danach können Sie das Font Awesome-CSS mit dem Pfad /i/font-awesome-4.2.0/css/font-awesome.css ansprechen. Wenn Sie das PL/SQL Embedded Gateway verwenden, müssen die Dateien in die Datenbank geladen werden - der Community-Tipp Einrichtung und Nutzung des PL/SQL Embedded Gateways gibt, im Bereich FTP-Zugang zu den Statischen Dateien, Tipps dazu.

Das Einbinden in Ihre APEX-Anwendung ist nun nur noch ein kleiner Handgriff am APEX-Seitentemplate: Tragen Sie die URL im Bereich Cascading Style Sheets unter File URLs ein.

Abbildung 8: Font Awesome im Seitentemplate einbinden

Wenn Sie keinen Zugriff auf den APEX-Webserver haben (wie bei apex.oracle.com), bleibt Ihnen im Moment nur das Einbinden der Font-Awesome-Dateien aus dem Internet oder von einem anderen Webserver - Informationen dazu finden Sie auf der Webseite von Font Awesome. Da die Dateien von Font Awesome sich gegenseitig mit relativen Pfaden referenzieren, kommt das Hochladen in den APEX-Workspace als Statische Dateien nicht in Frage.

Wenn APEX 5.0 zur Verfügung steht, muss Sie das alles nicht mehr kümmern - es wird out-of-the-box enthalten sein. Probieren Sie es ruhig mal in der Early Adopter Instanz aus - Sie können den HTML-Text Ihres "Desktop-Tests" einfach in eine Region vom Typ Static Content kopieren. Allerdings enthält die APEX 5.0 Early Adopter Instanz eine etwas ältere Version von Font Awesome; nehmen Sie daher anstelle des Symbols fa-database das Symbol fa-home.

Abbildung 9: Font Awesome in einer APEX-Anwendung

Das Einbinden von Icons in APEX-Anwendungen wird mit Font-Awesome völlig neu definiert - wenn Sie eine andere Farbe oder eine andere Größe brauchen, stellen Sie das Icon einfach mit ein paar CSS-Angaben um - das Verändern eines vorhandenen Icons mit einem Bildbearbeitungsprogramm entfällt ebenso wie das ständige Hochladen als statische Datei. Font Awesome kommt mit APEX 5.0 zwar recht leise und von vielen unbemerkt daher, es wird das Leben vieler APEX-Entwickler mit Sicherheit leichter machen.

Zurück zur Community-Seite