Zum Inhalt springen

Icons im Icon-Font

18. April 2023
Eine Grundauswahl von Icons wird über ein Icon-Font geladen. Diese Icons werden von verschiedenen Standard-Funktionen des Templates benötigt, so z.B. in den Navigations-Menüs oder in Download-Listen.

Über ein Sitemap-Attribut kann ausgewählt werden, ob als Grundlage die Awesome Icons oder die Bootstrap Icons verwendet werden sollen. Dies ermöglicht eine Anpassung der Silrichtung der Icons, welche nicht manuell beeinflusst werden können.

Zur Auswahl stehen momentan die folgenden Icons-Fonts:

  • Awesome Icons (optimiert)
  • Awesome Icons (nicht optimiert, vollständig)
  • Bootstrap Icons

Die Voreinstellung für neue Websites ist Awesome Icons (optimiert).

Die Variante Awesome Icons (nicht optimiert, vollständig) ist nur für die Kompatibilität mit älteren, in vorherigen Versionen des Mercury-Templates angelegten Websites erforderlich und sollte nur nach Absprache mit der OpenCms-Administration ausgewählt werden.

In der folgenden Liste wird das Icon-Font angezeigt welches aktuell ausgewählt ist.

Icons im Icon-Font

Verwendetes Icon-Font: Awesome Icons (optimiert)

Icon Fonts sind spezielle Web-Schriftarten, mit denen keine Buchstaben, sondern Piktogramme bzw. Icons abgebildet werden. Ein Icon Font besteht also nicht aus Buchstaben und Zahlen, sondern aus einer großen Auswahl an Icons. 

Icon Fonts werden als Webfonts beim Aufruf der Seite zusätzlich geladen. Die Icons können dann mit speziellem CSS an entsprechender Stelle eingebunden / angezeigt werden.

Das Laden eines großen Icon Fonts kann die Ladezeit einer Seite negativ beeinflussen, insbesondere wenn die meisten Icons in dem Font gar nicht verwendet werden.

Das Mercury Template verwendet Icon Fonts in der Regel dort, wo ein Icon sehr häufig benötigt wird, so z.B. in den Navigations-Menüs oder in Download-Listen. Hierfür werden optimierte Icon Fonts angeboten, welche nur die am häufigsten verwendeten Icons enthalten.

In der aktuellen Version der Mercuty Templates werden einzelne Icons oft als "Inline" SVG Grafiken direkt in die Seite eingebettet. Dies ermöglicht die Verwendung von selten verwendeten Icons oder Icons aus verschiedenen Icon Font Sammlungen gleichzeitig, ohne dass jedes mal das ganze Font geladen werden muss.