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;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
speak: never;
font-feature-settings: "liga";
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 Front-End-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.