Bakehouse Icon Font für das Frontend

    Mit der Bakehouse Icon Font verfügen Entwickler:innen auf Wunsch über ein umfangreiches Set skalier- und editierbaren Icons – so können beispielsweise Größe, Farbe oder Schlagschatten schnell und einfach mittels CSS angepasst werden.

    Zur Icon-Übersicht

    Icon-Font-CSS einbinden

    CSS im TypoScript laden:

    Typoscript
    page.includeCSS.iconset = EXT:bh/Resources/Public/Css/iconset-frontend.css

    Implementierung im Template

    Die für die Icon Font erforderliche CSS-Datei wird nun in deinem Projekt geladen. Verschiedene Implementationsmöglichkeiten stehen nun zur Verfügung:

    HTML
    <!-- CSS-Klasse --> <span class="bh-font-menu"></span> <!-- Ligatur --> <span class="bh-font-">menu</span> <!-- Mit CSS-Klassen-Prefix --> <div class="bh-font- myIcon"></div> <style> .myIcon:before{ content: "\e900"; } </style> <!-- Individuelle CSS-Klasse --> <style> .myClass { font-family: 'bakehouse-iconset' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; letter-spacing: 0; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; font-feature-settings: "liga"; -webkit-font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: discretionary-ligatures; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style>

    Icons in der Navigation

    Über die edit Seiteneinstellung steht – bei aktiviertem Frontend-Iconset – den Redakteur:innen die Möglichkeit offen, ein Icon pro Unterseite auszuwählen. Dieses wird automatisch in der Navigation ausgegeben oder kann über page.tx_bh_icon im Fluid angesprochen werden.