• Navigation überspringen
  • Zur Navigation
  • Zum Seitenende
Organisationsmenü öffnen Organisationsmenü schließen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
  • FAUZur zentralen FAU Website
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
  • RRZE
  • Videoportal
  • Lageplan und Anfahrt
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
Menu Menu schließen
  • Grundlagen
    • Rahmenbedingungen für Webauftritte
    • Über WordPress
      • Grundsätzliches zum Webpublishing
    • Login und Navigation im Backend
      • Profil
      • Dashboard
      • Der Customizer
    • Benutzer anlegen und bearbeiten
    • Seiten
      • Eine Seite erstellen
      • Mehrere Seiten gleichzeitig konfigurieren
      • Seiten und Beiträge freigeben
    • Beiträge
    • Sidebar
    • Inhalte bearbeiten
      • Mediathek
      • Bilder
      • Galerie
        • Bildergalerie im Gridformat
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • Seitenstruktur erstellen
    • Menüs
    • Widgetbereiche und Widgets
    • Häufig gestellte Fragen
    Portal Grundlagen
  • Plugins
    • Plugins aktivieren
    • Externe Daten einbinden
      • Calendar
      • CRIS
      • FAU oEmbed
      • Jobs
      • Lehrveranstaltungen
      • Remoter
      • Statistik
      • UnivIS
      • Video
    • Neue Inhaltstypen erstellen
      • Expo
      • FAQ
      • Glossary
      • Person
      • Legal (ehemals ToS – „Terms of Service“)
      • RSVP
      • Synonym
    • Inhaltsseiten mit Funktionen erweitern
      • Contact Form 7
      • Downloads
      • Elements
      • Multilang
      • Advanced Editor Tools
      • Verfallsdatum für Beiträge („Post-Expiration“)
    • Zugang beschränken
      • Access Control
      • Private Site
    • Beiträge teilen
      • Auto-Tweet
      • RSS
    • Spezialplugins
      • Newsletter
      • Progressive Web-App (PWA)
      • The SEO Framework
      • Workflow
      • WS Form
    • Über Externe Plugins
    • Über FAU- und RRZE-Plugins
    Portal Plugins
  • Themes
    • FAU Einrichtungen
      • Umsetzungsbeispiele
      • Templates
        • Standardtemplate
        • Die Inhaltsseite mit Navi
        • Portalseite
        • Portalindexseite
        • Startseite
        • Startseite Fakultät
      • Shortcodes
        • Blogroll
        • Portalmenüs
        • Bildlinks
    • FAU Events
      • Startseite
      • Widget-Bereiche und Footer-Inhalt
      • Referenten und Vorträge
      • Shortcodes für Referenten und Vorträge
      • Call for Papers
      • Externe Anmeldeformulare einbinden
    Portal Themes
  • Entwicklung
    • Design
      • Farben (Markendesign 2021)
      • Logos
        • Logos zentraler Anwendungen
        • Einsatz im Videoportal
        • Einsatz im Social Media und auf Online-Plattformen
      • Schriften
    • Einsatzkontext (Statistik)
      • Einrichtungsbezeichnungen
    • Versionsverwaltung Git
    • Einheitliche Vergabe von Versionsnummern
    • Vorgaben an Themes
    • Vorgaben an Plugins
    • Eigene Testinstanz
    • Serverkonfiguration
    • Statistiken zu Webauftritten
    Portal Entwicklung
  • Vorlagen
    • Akkordeons
    • Ansprechpartner & Kontakte
      • Format Kompakt
      • Runde Kacheln
      • Format Sidebar
      • Klassische Darstellung
    • Beiträge ausgeben
    • Button
    • Icon & Iconboxen
    • Kurze Hinweise
    • Testimonials
    • Textboxen
    Portal Vorlagen
  • Tutorials
    • Schnelleinstieg FAU Events
    • Publikationsliste erstellen
    • Tipps und Tricks
    • Neue Daten in die FAU-Karte einbinden
    • Vortragsliste erstellen
    • Schnelleinstieg FAU Einrichtungen
      • Vorbereitungen
      • Navigation im Backend
      • Ein Theme auswählen
      • Seitenlogo und Seiteninformationen ergänzen
      • Eine Startseite erstellen
      • Rechtstexte generieren
      • Inhaltsseiten erstellen für Anfänger
      • Beiträge und die dynamische Sidebar
      • Abmessungen für Bilder und Grafiken
      • Beiträge und die dynamische Sidebar
      • Portale und die Seitennavigation
      • Suchmaschinenoptimierung in 5 Minuten
      • Blogroll und Finetuning
    • Barrierefreiheit
      • Vorwort und Überblick
      • Einführung und Hintergründe
      • Bereitstellung und Pflege von Inhalten
      • Entwicklung und Design
      • Organisatorische und rechtliche Anforderungen
      • Satzungen
      • Tests der Barrierefreiheit
      • Weitere Leitfäden und relevante Informationsangebote
      • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
    • SEO – Search engine optimization
      • SEO Inhalte gestalten
      • SEO Grundlagen
      • SEO und Barrierefreiheit
    Portal Tutorials
  1. Startseite
  2. Plugins
  3. Inhaltsseiten mit Funktionen erweitern
  4. Elements
  5. Icons

Icons

Bereichsnavigation: Plugins
  • Plugins aktivieren
  • Externe Daten einbinden
    • Calendar
      • Erste Schritte
      • Termine einbinden
      • Darstellungsbeispiele
    • CRIS
      • Typen-Filter
      • Einstellungen
      • Erweiterte Optionen
      • Automatische Synchronisierung
    • FAU oEmbed
      • Einbindung von Karten
      • Fragen & Antworten
    • Jobs
    • Lehrveranstaltungen
    • Remoter
    • Statistik
    • UnivIS
      • Attribute
      • Einzelne Lehrveranstaltungen
      • Einzelne Mitarbeiter
      • Voreinstellung der UnivIS-OrgNr.
      • Organisationsdaten einbinden
      • Mitarbeiterdaten einbinden
      • Lehrveranstaltungsdaten einbinden
      • Publikationsdaten einbinden
      • UnivIS im Gutenberg Editor
      • FAQ
    • Video
  • Neue Inhaltstypen erstellen
    • FAQ
      • Attribute
        • category
        • class
        • glossary
        • hide
        • id
        • order
        • show
        • sort
        • tag
      • Beispiele
        • Alle Attribute in Verwendung
        • Einzelne FAQ in vorgegebener Reihenfolge
        • FAQ nach Schlagwörtern filtern und in Kategorien gruppieren
        • Glossar mit expliziten Kategorien als A-Z Register
        • Glossar mit expliziten Kategorien als Tabs
        • Glossar mit expliziten Kategorien als Tagcloud
        • Glossar mit expliziten Schlagwörtern als A-Z Register
        • Glossar mit expliziten Schlagwörtern als Tabs
        • Glossar mit expliziten Schlagwörtern als Tagcloud
        • Glossar mit Kategorien als Tagcloud Register
        • Glossar mit Schlagwörtern als Tabs
      • FAQ von anderen Quellen beziehen
        • Domains registrieren
        • Protokoll
        • Synchronisieren
    • Person
      • Alle Formate in der Übersicht
      • Sortierung
      • Standardausgabe
      • Format card
        • Anwendungsbeispiele card
      • Format table
      • Format kompakt
      • Format page
      • Format sidebar
      • FAQ
      • Eine Kontaktübersicht anlegen
        • Kontaktübersicht Musterseite A
        • Kontaktübersicht Musterseite B
        • Kontaktübersicht Musterseite C
        • Kontaktübersicht Musterseite D
    • Legal (Rechtliche Pflichttexte)
    • Expo
    • Glossary
    • RSVP
      • Hilfsmittel und Hinweise zur Nutzung
      • Analoge Kontaktverfolgung
    • Synonym
  • Inhaltsseiten mit Funktionen erweitern
    • WS Form
    • Contact Form 7
    • Downloads
    • Elements
      • Accordion
        • Accordions verschachteln
        • Accordion Sprungmarken
        • Accordion – Häufige Probleme und Fragen
      • Alerts / Hinweisboxen
        • Inner Alert
      • Assistant
      • Buttons
      • Content-Index
        • Beispielseite Shortcode Content-Index
      • Content-Slider / Text-Slider
      • Divider – Der unsichtbare Trenner
      • Einschub
      • Galerie
      • Hidden Text
      • Icons
      • LaTeX
      • Legal-text
      • Mehrspaltige Fließtexte
      • Mehrspaltiger Inhalt
      • News – Beiträge ausgeben
        • Custom News Beispielumsetzung
      • Notices / Absatzklassen
      • Tabs – Registerkarten
      • Timeline
    • Multilang
      • Mehrsprachigen Webauftritt mit einer einzelnen Instanz bereitstellen
      • Mehrsprachigen Webauftritt mit mehreren Instanzen bereitstellen
    • Advanced Editor Tools
    • Verfallsdatum für Beiträge („Post-Expiration“)
  • Zugang beschränken
    • Access Control
    • Private Site
  • Beiträge teilen
    • Auto-Tweet
    • RSS
  • Spezialplugins
    • The SEO Framework
    • Progressive Web-App (PWA)
    • RRZE Newsletter
      • Newsletter-Module (Erweiterungen)
    • Workflow
      • Übersetzung
      • Fremdsprachigen Webauftritt managen
  • Über Externe Plugins
  • Über FAU- und RRZE-Plugins

Icons

Beratung und Support

Webteam

Webteam

  • E-Mail: webmaster@fau.de
Beschreibung: Für alle Fragen rund um WordPress, Webhosting & Co.
Seit dem letzten Update werden Icon-Namen aus Font Awesome 6 verwendet. Im Icon-Attribut muss für die Icon-Sets „brands“ und „regular“ zusätzlich der Setname angegeben werden. Beispiel: [icon icon="brands twitter"]

Mit dem Shortcode [icon icon="solid camera-retro"] können Icons im Inhaltsbereich der eigenen Seite hinzugefügt werden.

Leider unterstützt Ihr Browser keine HTML5-Videoformate. Rufen Sie dazu das Video RRZE Elements | Icons auf Inhaltsseiten einbinden aus dem Videoportal der FAU auf.

Shortcode-Attribute

Die folgenden Attribute stehen zur Verfügung:

color="#000000"
Steuert die Farbe des Icons. Der Wert wird entweder als Universitätskürzel (phil | rw | nat | tf | med), oder als HEX-Farbwert angegeben (z.B. #000000).
icon="solid heart-pulse"
Steuert das verwendete Icon. Alle Icons aus der Font-Awesome 6 Linie können verwendet werden. Der Setname muss vor dem Iconnamen angegeben werden. Bei Icons aus der Reihe „Solid“ kann der Setname weggelassen werden.
style="2x"
Steuert die Größe des Icons. Akzeptiert die Werte 2x | 3x | 4x | 5x. Ohne das Attribut wird der Wert 1x verwendet.
style="border"
Erzeugt einen Rahmen um das Icon.
style="pull-left" oder style="pull-right"
Stellt das Icon links oder rechts neben einem Text dar.
alt=""
Vergibt einen Alternativtext für das Icon. Ohne Angabe des Parameters werden Icons auf aria-hidden=“true“ gesetzt.

Einfache Umsetzungsbeispiele

Icons in Texten einbinden

Icons können sowohl in Überschriften, als auch in Texten eingebaut werden:

Ein Icon kann als einfaches Symbol mithilfe des Shortcodes eingebunden werden. Man kann das Icon auch in den Text einbauen.

Ein Icon kann als einfaches [icon icon="solid bath"] Symbol mithilfe des Shortcodes eingebunden werden. Man kann das Icon auch in den [icon icon="solid pencil"] Text einbauen.
		

Icons in einer Liste oder Überschrift einfügen

  • Badewanne
  • Holzhammer

Icons neben Absätzen einbinden

Dann ist sie müde; und weil das Wasser unermüdlich ist, läßt sie sich treiben. Den klugen und stolzen Kopf bergwärts gewendet, fließt sie unter der hohen Wölbung föhnigen Himmels, durch gilbende Bergwiesen, zwischen brennenden Ahornen, schwarzen Fichten und glühenden Buchen ins tiefere Land hinaus.
Den Mann hat sie nicht mehr gesehen. Vielleicht ist er noch droben bei der Nestgrube, denn es kamen jüngere Lachsfrauen in den letzten Tagen. Sie ist nie eifersüchtig gewesen; es ist so Brauch in ihrer Sippe. Vielleicht hat ihn der Mensch erschossen oder erdolcht. Sie kennt das alles, und es bewegt sie nicht. Sie ist nur müde und ein wenig traurig. Dieses Gefühl ist immer in ihr, wenn sie nach der großen Hochzeitslust meerwärts zieht. Sie sehnt sich aus den harten Gewässern nach der sanften Umwellung des Meeres.

[icon icon="solid ship" style="5x, border, pull-left"]Dann ist sie müde...

Dann ist sie müde; und weil das Wasser unermüdlich ist, läßt sie sich treiben. Den klugen und stolzen Kopf bergwärts gewendet, fließt sie unter der hohen Wölbung föhnigen Himmels, durch gilbende Bergwiesen, zwischen brennenden Ahornen, schwarzen Fichten und glühenden Buchen ins tiefere Land hinaus.
Den Mann hat sie nicht mehr gesehen. Vielleicht ist er noch droben bei der Nestgrube, denn es kamen jüngere Lachsfrauen in den letzten Tagen. Sie ist nie eifersüchtig gewesen; es ist so Brauch in ihrer Sippe. Vielleicht hat ihn der Mensch erschossen oder erdolcht. Sie kennt das alles, und es bewegt sie nicht. Sie ist nur müde und ein wenig traurig. Dieses Gefühl ist immer in ihr, wenn sie nach der großen Hochzeitslust meerwärts zieht. Sie sehnt sich aus den harten Gewässern nach der sanften Umwellung des Meeres.

[icon icon="solid ship" style="5x, border, pull-right"]Dann ist sie müde...

Kombination verschiedener Shortcodes

Im folgenden Umsetzungsbeispiel wurden gleich mehrere Shortcodes verwendet, um das gewünschte Ergebnis zu erzielen. In einem Alert [alert color="#000000" font="light"]...[/alert] wurde ein [icon icon="solid exclamation-triangle" color="#ffffff" style="5x, border"]-Shortcode gesetzt. Dieser wird gefolgt von einem [divider], dem unsichtbaren Trenner und mehreren Spalten, die mit einem [columns number="2"]…[/columns]-Shortcode erstellt wurden.

Umgang mit Chemikalien

»Ich bin da! Ich bin da!« Das eiskalte Wasser schoß ihm durch die Kiemen, als er den Kopf aus der Eihaut gebracht hatte und den ersten Atemzug tun mußte. Das kleine Maul stand ihm vor Schreck offen. Dann führte die Strömung die Eihaut hinweg, und er gewahrte sich als winziges Geschöpf, durchsichtig wie das Wasser, schmal und bläßlichbraun wie ein Weidenblatt im Herbst.

Sicherheit im Labor

»Ich bin da! Ich bin da!« Das eiskalte Wasser schoß ihm durch die Kiemen, als er den Kopf aus der Eihaut gebracht hatte und den ersten Atemzug tun mußte. Das kleine Maul stand ihm vor Schreck offen. Dann führte die Strömung die Eihaut hinweg, und er gewahrte sich als winziges Geschöpf, durchsichtig wie das Wasser, schmal und bläßlichbraun wie ein Weidenblatt im Herbst.

Der Code hinter der Beispielumsetzung oben

[divider]
[alert color="#000000" font="light"]
[icon icon="solid exclamation-triangle" color="#ffffff" style="5x, border"]
[divider]
[columns number="2"]
[column]

Umgang mit Chemikalien

»Ich bin da! Ich bin da!« Das eiskalte Wasser schoß ihm durch die Kiemen, als er den Kopf aus der Eihaut gebracht hatte und den ersten Atemzug tun mußte. Das kleine Maul stand ihm vor Schreck offen. Dann führte die Strömung die Eihaut hinweg, und er gewahrte sich als winziges Geschöpf, durchsichtig wie das Wasser, schmal und bläßlichbraun wie ein Weidenblatt im Herbst.
[/column]
[column]

Sicherheit im Labor

»Ich bin da! Ich bin da!« Das eiskalte Wasser schoß ihm durch die Kiemen, als er den Kopf aus der Eihaut gebracht hatte und den ersten Atemzug tun mußte. Das kleine Maul stand ihm vor Schreck offen. Dann führte die Strömung die Eihaut hinweg, und er gewahrte sich als winziges Geschöpf, durchsichtig wie das Wasser, schmal und bläßlichbraun wie ein Weidenblatt im Herbst.
[/column]
[/columns]
[/alert]

Weitere Hinweise zum Webauftritt

Social Media

  • RSS Feed
  • GitHub
  • Twitter

Noch Fragen?

Schreiben Sie uns eine Mail an webmaster@fau.de. Wir beantworten Ihnen alle offenen Fragen rund um unser Content Management System (CMS), WordPress, Webhosting und Co.

Regionales Rechenzentrum Erlangen
(RRZE)

Martensstraße 1
91058 Erlangen
  • Kontakt
  • Webworking Blog
  • Impressum
  • Datenschutz
  • Barrierefreiheit
  • RSS Feed
  • GitHub
  • Twitter
Nach oben