Wie kann ich in Anzeige-Templates Font Awesome-Icons verwenden?

Voraussetzungen

Sie haben Administrationsrechte an der LivingApp.

Vorgehen

Wenn Sie in Ihren Templates das Library-Template la_standard_page verwenden werden die Font Awesome-Icons automatisch eingebunden. Dies sieht z.B. so aus:

<?renderblock globals.t_la_standard_page(title="Titel")?>
   <h1>Überschrift</h1>
   <p>Inhalt mit Icon: <i class="fas fa-paw fa-fw fa-2x"></i></p>
<?end renderblock?>

Wenn Sie die Icons selber einbinden wollen, können Sie das Library-Template la_static_font_awesome folgendermaßen verwenden:

<?render globals.t_la_static_font_awesome()?>

Dies erzeugt folgenden Link:

<link href="https://my.living-apps.de/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css" rel="stylesheet">

Zur Anzeige eines Icons können Sie wie gewohnt folgendes HTML verwenden:

<i class="fas fa-paw fa-fw fa-2x"></i>

Sie können jedoch auch das Library-Template la_icon verwenden. Dieses Template bietet die Möglichkeit einen Standard-Icon-Stil zu verwenden, den Sie über den Parameter la_default_faicon_style festlegen können. Wollen Sie für alle Ihre Icons einen anderen Stil verwenden, müssen Sie nur den Wert des Parameters ändern.

Der Aufruf des Templates sieht beispielsweise so aus:

<?render globals.t_la_icon("paw", fw=True, cssclass="fa-2x")?>

Dies gibt das selbe HTML aus, wie in obigem Beispiel:

<i class="fas fa-paw fa-fw fa-2x"></i>

Standard-Icon-Stil

Der Standard-Stil ist classic/solid. Um einen anderen Standard-Stil zu konfigurienen können Sie den Parameter la_default_faicon_style in Ihrer LivingApp setzen.

Gehen Sie dazu folgendermaßen vor:

Wählen Sie im Menü Konfiguration ‣ Erweitert und klicken anschließend in der linken Menüleiste auf Parameter.
Klicken Sie dann auf den Button Neuen Parameter hinzufügen.

Parameter hinzufügen
Tippen Sie im nun geöffneten Fenster bei Identifizierer den Text la_default_faicon_style ein.

Parameter konfigurieren
Bei Typ muss STR (Text) ausgewählt werden.

Tippen Sie bei Wert den gewünschten Stil-Namen ein.

Bemerkung

Normalerweise wird die frei verfügbare Version der Font Awesome-Icons eingebunden. Diese bietet ca. 2000 Icons in den Stilen classic/solid, classic/regular und brands.

Die kommerzielle Version bietet ca. 50000 Icons in den unten aufgelisteten Stilen (ca. 500 in brands und jeweils ca. 3000 Icon in den anderen Stilen).

Zur Verwendung ist jedoch eine Font Awesome-Lizenz nötig. Setzen Sie sich dazu mit LivingLogic unter info@livinglogic.de in Verbindung.

Es stehen folgende Stile zur Verfügung:

icon-Stile
Name	Anzahl Icons (frei, ca.)	Anzahl Icons (kommerziell, ca.)
`classic/solid`	1500	3000
`classic/regular`	150	3000
`classic/light`	0	3000
`classic/thin`	0	3000
`duotone/solid`	0	3000
`duotone/regular`	0	3000
`duotone/light`	0	3000
`duotone/thin`	0	3000
`sharp/solid`	0	3000
`sharp/regular`	0	3000
`sharp/light`	0	3000
`sharp/thin`	0	3000
`sharp-duotone/solid`	0	3000
`sharp-duotone/regular`	0	3000
`sharp-duotone/light`	0	3000
`sharp-duotone/thin`	0	3000
`brands`	500	500

Verwendung eines Nicht-Standard-Stils

Wollen Sie ein Icon mit einem anderen Stil verwendet als den Standard-Stil (z.B. um ein Firmenlogo aus dem brands-Stil anzuzeigen), können Sie den Stil mit / getrennt an die Icon-Namen hängen:

<?render globals.t_la_icon("wikipedia-w/brands")?>

erzeugt:

<i class="fab fa-wikipedia-w"></i>

und:

<?render globals.t_la_icon("paw/duotone/light")?>

erzeugt:

<i class="fadl fa-paw"></i>

(für den Icon-Stil duotone/light ist jedoch die kommerzielle Version der Font Awesome-Icons nötig.)

Unterschiedliche Icons je nach Font Awesome-Version

Wenn Ihr Wunsch-Icon nur in der kommerziellen Version von Font Awesome zur Verfügung steht und Sie dieses verwenden können, jedoch wollen, daß auch bei Verwendung der freien Version von Font Awesome ein Icon angezeigt wird, können Sie einen zweiten Namen an la_icon übergeben:

<?render globals.t_la_icon("paw/duotone/light", "paw")?>

oder

<?render globals.t_la_icon("chevrons-down", "chevron-up")?>

In diesem Fall wird dann wird das erste Icon verwendet, wenn die kommerzielle Version in Verwendung ist, und das zweite Icon wenn die freie Version in Verwendung ist.