USE-SYMBOLS (LMU-Intern Modul )
src/app/shared/components/use-symbols/templates
Demo Section
Each variation will be presented in the following section.
Readme
use-symbols (component
)
Description
This blueprint is based on the blueprint of Veams. The Feature is to enables the creation of Google material symbols in a paragraph template icon bar.
Requirements
- [@veams/assets/fonts] Google Font Material Symbols (material-symbols-v2-latin-regular) als File mit Format (woff, woff2, eot, ttf, svg)
Fields
use-symbols.hbs
Settings
Parameter | Type | Default | Description |
---|---|---|---|
settings.useSymbolsClasses | Boolean | false |
Modifier classes for component: For the Font Material Symbol:‘fsizeS’, ‘fsizeL’, ‘fsizeXL’ define different Sizes of the Symbols |
settings.useSymbolsContextClass | String | 'default' |
Context class of component: ‘default’ for Landingpage integration , ‘rte’ for detailpage integration |
Content
Parameter | Type | Description |
---|---|---|
content.headline | String | The Headline for the Icon/Symbol area (optional) |
content.text | String | The Infotext for the Icon/Symbol area (optional) |
content.icons | Array | Has Objects for the Icon/Symbol |
use-symbols__iconarea.hbs
Settings
Parameter | Type | Default | Description |
---|
Content
Parameter | Type | Description |
---|---|---|
content.iconName | String | Enthält den spezifischen Iconname für das ICON aus der Font Material Symbols (https://fonts.google.com/icons?hl=de). Dient zum Anzeigen des gewünschten Icons (requird) |
content.iconTitle | String | Title für das ICon zur besseren behindertengerechten Lösung. Title beschreibt das Symbol (required) |
content.iconInfo | String | Zusatzinfo zum Symbol. Erscheint neben dem Icon und kann als Ergänzung oder als Legendentext verwendet werden. (optional) |
content."linkHref | String | Url zur Verlinkung des Icons. Wenn diese gesetzt ist wird um das Icon ein Link-Tag gesetzt. (optional) |
content.iconLinkTitle | String | Title des Link-Tags (optional) |
SASS
Variables
There are multiple variables which you can change:
Variable | Value | Description |
---|
Modifier Classes
There are modifier classes you can add to use-Symbols
:
| Modifier | Description | |:— | :—: |‚ | fsizeL | to show a large symbol (font-size: 3.6rem) (standrad is 2.4rem) | | fsizeXL | to show a xlarge symbol (font-size: 4.8rem) (standrad is 2.4rem) | | is-vertical | show the icons in a vertical line (standard is a horizontal line) |
There are modifier classes you can add to use-Symbols_iconarea
:
| Modifier | Description | |:— | :—: |‚ | is-font-bold | show the iconInfotext in Bold | | is-text-under | show the iconInfotext under teh pictogram |
Templates
use-symbols.hbs
<div class="c-use-symbols{{#if
settings.useSymbolsContextClass}}--{{settings.useSymbolsContextClass}}{{else}}--default{{/if}}{{#if
settings.useSymbolsClasses}} {{settings.useSymbolsClasses}}{{/if}}"
data-css="c-use-symbols">
{{#if content.headline}}
<h2 class="use-symbols__headline">{{content.headline}}</h2>
{{/if}}
{{#if content.text}}
<div class="use-symbols__text">{{content.text}}</div>
{{/if}}
<div class="use-symbols__iconarea">
{{#each content.icons}}
{{> use-symbols__iconarea}}
{{/each}}
</div>
</div>
use-symbols__iconarea.hbs
{{#if content.iconName}}
<div class="use-symbols__one-icon {{#if settings.useSymbolsOneIconClass}} {{settings.useSymbolsOneIconClass}}{{/if}}">{{#if content.linkHref}}<a href="{{content.linkHref}}" class="use-symbols__icon-link" {{#if content.iconLinkTitle}}title="{{content.iconLinkTitle}}"{{/if}} target="_blank">{{/if}}<span class="use-symbols__material-icons" {{#if content.iconTitle}}title="{{content.iconTitle}}"{{/if}}>{{content.iconName}}</span>{{#if content.iconInfo}}<span class="use-symbols__material-iconinfo">{{content.iconInfo}}</span>{{/if}}{{#if content.linkHref}}</a>{{/if}}</div>
{{/if}}
Data File
use-symbols.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default Symbol Font-Size 24px"
},
"settings": {
"useSymbolsContextClass": "default",
"useSymbolsClasses": false
},
"content": {
"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
"icons": [
{
"content": {
"iconName": "chair_alt",
"iconTitle": "Symbol Anzahl Sitzplätze",
"iconInfo": "120 Sitzplätze"
}
},
{
"content": {
"iconName": "people",
"iconTitle": "Symbol Anzahl Sitzplätze",
"iconInfo": "120 Sitzplätze (Uni Wien)"
}
},
{
"content": {
"iconName": "desk",
"iconTitle": "Symbol Tisch",
"iconInfo": "30 Tische"
}
},
{
"content": {
"iconName": "accessible",
"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
"iconInfo": "Behindertengerecht"
}
},
{
"content": {
"iconName": "scanner",
"iconTitle": "Symbol Scanner",
"iconInfo": ""
}
},
{
"content": {
"iconName": "family_restroom",
"iconTitle": "Symbol Mutter-Kind-Raum",
"iconInfo": ""
}
},
{
"content": {
"iconName": "weekend",
"iconTitle": "Symbol Sofa/Lounge",
"iconInfo": ""
}
},
{
"content": {
"iconName": "calendar_month",
"iconTitle": "Symbol Platzreservierung",
"iconInfo": ""
}
},
{
"content": {
"iconName": "event_available",
"iconTitle": "Symbol Platzreservierung",
"iconInfo": ""
}
},
{
"content": {
"iconName": "access_time",
"iconTitle": "Symbol Platzreservierung",
"iconInfo": "Platzreservierung (Uni Wien)"
}
},
{
"content": {
"iconName": "meeting_room",
"iconTitle": "Symbol Einzelcarrels",
"iconInfo": ""
}
},
{
"content": {
"iconName": "local_cafe",
"iconTitle": "Symbol Café-/Getränkeautomat",
"iconInfo": ""
}
},
{
"content": {
"iconName": "desktop_windows",
"iconTitle": "Symbol Recherche-PC",
"iconInfo": ""
}
},
{
"content": {
"iconName": "credit_card",
"iconTitle": "Symbol Zugang mit LMU-Card ",
"iconInfo": ""
}
},
{
"content": {
"iconName": "video_chat",
"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
"iconInfo": ""
}
},
{
"content": {
"iconName": "support_agent",
"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
"iconInfo": ""
}
},
{
"content": {
"iconName": "ac_unit",
"iconTitle": "Symbol Kontrollierte Temperierung",
"iconInfo": ""
}
},
{
"content": {
"iconName": "contact_support",
"iconTitle": "Symbol Support",
"iconInfo": "",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"content": {
"iconName": "live_help",
"iconTitle": "Symbol Support",
"iconInfo": ""
}
},
{
"content": {
"iconName": "key",
"iconTitle": "Symbol Miet-Schließfach",
"iconInfo": ""
}
},
{
"content": {
"iconName": "key_off",
"iconTitle": "Symbol Kein Miet-Schließfach",
"iconInfo": ""
}
},
{
"content": {
"iconName": "dining",
"iconTitle": "Symbol Essen",
"iconInfo": ""
}
},
{
"content": {
"iconName": "qr_code_scanner",
"iconTitle": "Symbol Buchscanner",
"iconInfo":"Buchscanner Stockwerk 2 (Material icon)"
}
},
{
"content": {
"iconName": "groups",
"iconTitle": "Symbol Gruppenräume",
"iconInfo":"Material Icons Gruppenräume"
}
},
{
"content": {
"iconName": "diversity_3",
"iconTitle": "Symbol Gruppenräume",
"iconInfo":"Gruppenarbeitsplätze (Uni Wien)"
}
},
{
"content": {
"iconName": "blind",
"iconTitle": "Symbol Sehbehindertensitzplatz",
"iconInfo":"Sehbehindertenarbeitsplatz",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
}
]
}
},
"defaultvertikal": {
"docs": {
"variationName": "Default Symbol Font-Size 24px Vertikal"
},
"settings": {
"useSymbolsContextClass": "default",
"useSymbolsClasses": "is-vertical"
},
"content": {
"headline": "Legende",
"text":"",
"icons": [
{
"content": {
"iconName": "chair_alt",
"iconTitle": "Symbol Sitzplätze",
"iconInfo": "Anzahl verfügbarer Sitzplätze im Raum (MS / MI)"
}
},
{
"content": {
"iconName": "people",
"iconTitle": "Symbol Anzahl Sitzplätze",
"iconInfo": "Anzahl verfügbarer Sitzplätze im Raum (Lösung Uni Wien, MS / MI)"
}
},
{
"content": {
"iconName": "desk",
"iconTitle": "Symbol Anzahl Tische",
"iconInfo": "Anzahl verfügbarer Tische im Raum (MS / MI)"
}
},
{
"content": {
"iconName": "accessible",
"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
"iconInfo": "Behindertengerechte Benutzung möglich (MS / MI)"
}
},
{
"content": {
"iconName": "scanner",
"iconTitle": "Symbol Scanner",
"iconInfo": "Scannernutzung möglich (MS / MI)"
}
},
{
"content": {
"iconName": "groups",
"iconTitle": "Symbol Gruppenräume",
"iconInfo":"Gruppenräume (MS / MI)",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"content": {
"iconName": "diversity_3",
"iconTitle": "Symbol Gruppenräume",
"iconInfo":"Gruppenarbeitsplätze (Uni Wien, MS / MI)",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"content": {
"iconName": "family_restroom",
"iconTitle": "Symbol Mutter-Kind-Raum",
"iconInfo": " Mutter-Kind-Raum (MS / MI)"
}
},
{
"content": {
"iconName": "weekend",
"iconTitle": "Symbol Sofa/Lounge",
"iconInfo": "Sofa/Lounge (auch Uni Wien, MS / MI)"
}
},
{
"content": {
"iconName": "calendar_month",
"iconTitle": "Symbol Platzreservierung",
"iconInfo": "Platzreservierung (MS / MI)"
}
},
{
"content": {
"iconName": "event_available",
"iconTitle": "Symbol Platzreservierung",
"iconInfo": "Platzreservierung (MS / MI)"
}
},
{
"content": {
"iconName": "access_time",
"iconTitle": "Symbol Platzreservierung",
"iconInfo": "Platzreservierung (Uni Wien, MS / MI)"
}
},
{
"content": {
"iconName": "meeting_room",
"iconTitle": "Symbol Einzelcarrels",
"iconInfo": "Einzelcarrels (MS / MI)"
}
},
{
"content": {
"iconName": "fastfood",
"iconTitle": "Symbol Café-/Snack-, Getränkeautomat",
"iconInfo": "Café-/Snack-, getränkeautomat (MS / MI)"
}
},
{
"content": {
"iconName": "local_cafe",
"iconTitle": "Symbol Café-/Snack-, Getränkeautomat",
"iconInfo": " Café-/Snack-, Getränkeautomat (MS / MI)"
}
},
{
"content": {
"iconName": "dining",
"iconTitle": "Symbol Café-/Snack-, Getränkeautomat",
"iconInfo": "Café-/Snack-, Getränkeautomat (MS / MI)"
}
},
{
"content": {
"iconName": "blind",
"iconTitle": "Symbol Sehbehindertensitzplatz",
"iconInfo":"Sehbehindertenarbeitsplatz (MS / MI)",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"content": {
"iconName": "desktop_windows",
"iconTitle": "Symbol Recherche-PC",
"iconInfo": "Recherche-P (MS / MI)"
}
},
{
"content": {
"iconName": "credit_card",
"iconTitle": "Symbol Zugang mit LMU-Card ",
"iconInfo": "Zugang mit LMU-Card (MS / MI)"
}
},
{
"content": {
"iconName": "video_chat",
"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
"iconInfo": "aktive Teilnahme Videokonferenz (MS / MI)"
}
},
{
"content": {
"iconName": "support_agent",
"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
"iconInfo": "aktive Teilnahme Videokonferenz (MS / MI)"
}
},
{
"content": {
"iconName": "ac_unit",
"iconTitle": "Symbol Kontrollierte Temperierung",
"iconInfo": "Kontrollierte Temperierung (in Uni Wien Klimaanlage, MS / MI)"
}
},
{
"content": {
"iconName": "key",
"iconTitle": "Symbol Miet-Schließfach",
"iconInfo": "Mietschließfach MS / MI)"
}
},
{
"content": {
"iconName": "key_off",
"iconTitle": "Symbol Kein Miet-Schließfach",
"iconInfo": "Kein Mietschließfach (MS / MI)"
}
},
{
"content": {
"iconName": "contact_support",
"iconTitle": "Symbol Support",
"iconInfo": "Support im Zeitraum von 9.00 - 12:00 Uhr (MS / MI)"
}
},
{
"content": {
"iconName": "live_help",
"iconTitle": "Symbol Support",
"iconInfo": "Support (MS / MI)"
}
},
{
"content": {
"iconName": "qr_code_scanner",
"iconTitle": "Symbol Buchscanner",
"iconInfo":"Selbstverbucher (MS / MI)",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
}
]
}
},"defaultbold": {
"docs": {
"variationName": "Default Symbol Font-Size 24px mit Iconinfo BOLD"
},
"settings": {
"useSymbolsContextClass": "default",
"useSymbolsClasses": false
},
"content": {
"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
"icons": [
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "print",
"iconTitle": "Symbol Drucker",
"iconInfo": "Zusatztext zum Icon"
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "home",
"iconTitle": "Symbol Haus als Home",
"iconInfo": "Zusatztext zum Icon"
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "settings",
"iconTitle": "Symbol Zahnrad als Settings"
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "check",
"iconTitle": "Symbol Check als Haken"
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "bolt",
"iconTitle": "Symbol Bolt als Blitz",
"iconInfo": "Zusatztext zum Icon"
}
}
]
}
},
"default_fontsize_L": {
"docs": {
"variationName": "Default mit Symbol Font-Size L"
},
"settings": {
"useSymbolsContextClass": "default",
"useSymbolsClasses": "fsizeL"
},
"content": {
"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
"icons": [
{
"content": {
"iconName": "chair_alt",
"iconTitle": "Symbol Sitzplätze",
"iconInfo": "120 Sitzplätze"
}
},
{
"content": {
"iconName": "desk",
"iconTitle": "Symbol Tisch",
"iconInfo": "30 Tische"
}
},
{
"content": {
"iconName": "accessible",
"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
"iconInfo": "Behindertengerecht"
}
},
{
"content": {
"iconName": "scanner",
"iconTitle": "Symbol Scanner",
"iconInfo": ""
}
},
{
"content": {
"iconName": "family_restroom",
"iconTitle": "Symbol Mutter-Kind-Raum",
"iconInfo": ""
}
},
{
"content": {
"iconName": "weekend",
"iconTitle": "Symbol Sofa/Lounge",
"iconInfo": ""
}
},
{
"content": {
"iconName": "calendar_month",
"iconTitle": "Symbol Platzreservierung",
"iconInfo": ""
}
},
{
"content": {
"iconName": "meeting_room",
"iconTitle": "Symbol Einzelcarrels",
"iconInfo": ""
}
},
{
"content": {
"iconName": "local_cafe",
"iconTitle": "Symbol Café-/Getränkeautomat",
"iconInfo": ""
}
},
{
"content": {
"iconName": "desktop_windows",
"iconTitle": "Symbol Recherche-PC",
"iconInfo": ""
}
},
{
"content": {
"iconName": "credit_card",
"iconTitle": "Symbol Zugang mit LMU-Card ",
"iconInfo": ""
}
},
{
"content": {
"iconName": "video_chat",
"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
"iconInfo": ""
}
},
{
"content": {
"iconName": "ac_unit",
"iconTitle": "Symbol Kontrollierte Temperierung",
"iconInfo": ""
}
},
{
"content": {
"iconName": "print",
"iconTitle": "Symbol Drucker",
"iconInfo": "Zusatztext zum Icon"
}
},
{
"content": {
"iconName": "home",
"iconTitle": "Symbol Haus als Home",
"iconInfo": "Zusatztext zum Icon"
}
},
{
"content": {
"iconName": "settings",
"iconTitle": "Symbol Zahnrad als Settings"
}
},
{
"content": {
"iconName": "check",
"iconTitle": "Symbol Check als Haken"
}
},
{
"content": {
"iconName": "bolt",
"iconTitle": "Symbol Bolt als Blitz",
"iconInfo": "Zusatztext zum Icon"
}
}
]
}
},
"default_fontsize_XL": {
"docs": {
"variationName": "Default mit Symbol Font-Size XL"
},
"settings": {
"useSymbolsContextClass": "default",
"useSymbolsClasses": "fsizeXL"
},
"content": {
"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
"icons": [
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "person",
"iconTitle": "Pictogramm für Benutzerkonto",
"iconInfo": "Benutzerkonto",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "lock",
"iconTitle": "Pictogramm für E-Medien-Login",
"iconInfo": "E-Medien-Login",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "access_time",
"iconTitle": "Pictogramm für Öffnungszeiten",
"iconInfo": "Öffnungszeiten",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "event_available",
"iconTitle": "Pictogramm für Leseplatzreservierung",
"iconInfo": "Leseplatzreservierung",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "library_books",
"iconTitle": "Pictogramm für OPAC Online Katalog",
"iconInfo": "OPAC Online Katalog",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "storage",
"iconTitle": "Pictogramm für Forschungsdatenmanagement",
"iconInfo": "Forschungsdatenmanagement",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold"
},
"content": {
"iconName": "live_help",
"iconTitle": "Pictogramm für FAQ",
"iconInfo": "FAQ",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
}
]
}
},
"default_fontsize_XL_text_under": {
"docs": {
"variationName": "Default mit Symbol Font-Size XL, Schrift Bold und Text unter dem Pictogramm"
},
"settings": {
"useSymbolsContextClass": "default",
"useSymbolsClasses": "fsizeXL"
},
"content": {
"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
"icons": [
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold is-text-under"
},
"content": {
"iconName": "person",
"iconTitle": "Pictogramm für Benutzerkonto",
"iconInfo": "Benutzerkonto",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold is-text-under"
},
"content": {
"iconName": "lock",
"iconTitle": "Pictogramm für E-Medien-Login",
"iconInfo": "E-Medien-Login",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold is-text-under"
},
"content": {
"iconName": "access_time",
"iconTitle": "Pictogramm für Öffnungszeiten",
"iconInfo": "Öffnungszeiten",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold is-text-under"
},
"content": {
"iconName": "event_available",
"iconTitle": "Pictogramm für Leseplatzreservierung",
"iconInfo": "Leseplatzreservierung",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold is-text-under"
},
"content": {
"iconName": "library_books",
"iconTitle": "Pictogramm für OPAC Online Katalog",
"iconInfo": "OPAC Online Katalog",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold is-text-under"
},
"content": {
"iconName": "storage",
"iconTitle": "Pictogramm für Forschungsdatenmanagement",
"iconInfo": "Forschungsdatenmanagement",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"settings": {
"useSymbolsOneIconClass": "is-font-bold is-text-under"
},
"content": {
"iconName": "live_help",
"iconTitle": "Pictogramm für FAQ",
"iconInfo": "FAQ",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
}
]
}
},
"rte": {
"docs": {
"variationName": "RTE"
},
"settings": {
"useSymbolsContextClass": "rte",
"useSymbolsClasses": false
},
"content": {
"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Detailseite",
"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
"icons": [
{
"content": {
"iconName": "print",
"iconTitle": "Symbol Drucker",
"iconInfo": "Zusatztext zum Icon",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"content": {
"iconName": "home",
"iconTitle": "Symbol Haus als Home",
"iconInfo": "Zusatztext zum Icon",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
}
]
}
},
"rtevertical": {
"docs": {
"variationName": "RTEVertical"
},
"settings": {
"useSymbolsContextClass": "rte",
"useSymbolsClasses": "is-vertical"
},
"content": {
"headline": "Iconleiste untereinander mit mehreren Symbolen aus der Font Material Symbols in Detailseite",
"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
"icons": [
{
"content": {
"iconName": "print",
"iconTitle": "Symbol Drucker",
"iconInfo": "Zusatztext zum Icon",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
},
{
"content": {
"iconName": "home",
"iconTitle": "Symbol Haus als Home",
"iconInfo": "Zusatztext zum Icon",
"linkHref": "#",
"iconLinkTitle": "Link auf ..."
}
}
]
}
}
}
}
Styles
use-symbols.scss
/* ===================================================
component: use-symbols (Enables the creation of Google material symbols in a paragraph template icon bar)
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-use-symbols"] {
.use-symbols__headline {
@include headline-h2-styles();
}
.use-symbols__text {
font-family: $font-regular;
color: $color-dark;
font-size: 1.5rem;
line-height: (22/15);
letter-spacing: .025rem;
margin-bottom: 15px;
@include bp($bp-tablet-p) {
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .025rem;
margin-bottom: 20px;
}
}
.use-symbols__iconarea {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.use-symbols__material-icons {
font-family: $font-icon;
font-weight: normal;
font-style: normal;
font-size: 2.4rem; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
color: $color-dark;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.use-symbols__material-iconinfo {
font-family: $font-regular;
display: block;
padding: 1px 0px 1px 6px;
}
.use-symbols__icon-link {
display: flex; /* Setzt den Container als Flex-Container */
align-items: center;
flex-direction: row;
justify-content: flex-start;
color: $color-green;
border: none;
color: $color-green;
text-decoration: none;
.use-symbols__material-icons {
color: $color-green;
}
&:focus {
outline: none;
}
&:hover,
&:focus {
color: $color-dark;
.use-symbols__material-icons {
color: $color-dark;
}
}
&.a11y-focus-key {
@include a11y-focus-key();
}
@include print() {
text-decoration: underline !important;
}
}
&.fsizeL {
.use-symbols__material-icons {
font-size: 3.6rem;
}
}
&.fsizeXL {
.use-symbols__one-icon {
padding-right: 24px;
}
.use-symbols__material-icons {
font-size: 4.8rem;
}
}
&.is-vertical {
.use-symbols__iconarea {
flex-direction: column;
width: 100%;
align-items: flex-start;
}
.use-symbols__one-icon {
padding-left: 0px;
padding-right: 0px;
}
}
.use-symbols__one-icon {
display: flex; /* Setzt den Container als Flex-Container */
align-items: center;
flex-direction: row;
justify-content: flex-start;
padding: 0px 20px 12px 0px;
&.is-text-under{
flex-direction: column;
justify-content: center;
.use-symbols__icon-link {
flex-direction: column;
justify-content: center;
}
}
&.is-font-bold {
.use-symbols__material-iconinfo {
font-family: $font-bold;
}
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-use-symbols--default {
margin: 0 auto 60px;
@include bp($bp-mobile-p) {
margin-bottom: 68px; //da padding-bottom 12px bei Icon (use-symbols__one-icon) sonst 80px
}
@include bp($bp-tablet-p) {
margin-bottom:88px; //da padding-bottom 12px bei Icon (use-symbols__one-icon) sonst 100px
}
@include bp(1920px) {
margin-bottom: 108px; //da padding-bottom 12px bei Icon (use-symbols__one-icon) sonst 120px
}
}
.c-use-symbols--rte {
margin-bottom: 3px; //da padding-bottom 12px bei Icon (use-symbols__one-icon) sonst 15px
.use-symbols__headline {
width: 100%;
flex: 0 0 100%;
margin-left: 0px;
}
}
HTML Output
Default Symbol Font-Size 24px
<div class="c-use-symbols--default" data-css="c-use-symbols">
<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
<div class="use-symbols__iconarea">
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">people</span><span class="use-symbols__material-iconinfo">120 Sitzplätze (Uni Wien)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">event_available</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">access_time</span><span class="use-symbols__material-iconinfo">Platzreservierung (Uni Wien)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">support_agent</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Support">contact_support</span></a></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">live_help</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Miet-Schließfach">key</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kein Miet-Schließfach">key_off</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Essen">dining</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Buchscanner">qr_code_scanner</span><span class="use-symbols__material-iconinfo">Buchscanner Stockwerk 2 (Material icon)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">groups</span><span class="use-symbols__material-iconinfo">Material Icons Gruppenräume</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">diversity_3</span><span class="use-symbols__material-iconinfo">Gruppenarbeitsplätze (Uni Wien)</span></div>
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Sehbehindertensitzplatz">blind</span><span class="use-symbols__material-iconinfo">Sehbehindertenarbeitsplatz</span></a></div>
</div>
</div>
Default Symbol Font-Size 24px Vertikal
<div class="c-use-symbols--default is-vertical" data-css="c-use-symbols">
<h2 class="use-symbols__headline">Legende</h2>
<div class="use-symbols__iconarea">
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">Anzahl verfügbarer Sitzplätze im Raum (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">people</span><span class="use-symbols__material-iconinfo">Anzahl verfügbarer Sitzplätze im Raum (Lösung Uni Wien, MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Tische">desk</span><span class="use-symbols__material-iconinfo">Anzahl verfügbarer Tische im Raum (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerechte Benutzung möglich (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span><span class="use-symbols__material-iconinfo">Scannernutzung möglich (MS / MI)</span></div>
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Gruppenräume">groups</span><span class="use-symbols__material-iconinfo">Gruppenräume (MS / MI)</span></a></div>
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Gruppenräume">diversity_3</span><span class="use-symbols__material-iconinfo">Gruppenarbeitsplätze (Uni Wien, MS / MI)</span></a></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span><span class="use-symbols__material-iconinfo"> Mutter-Kind-Raum (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span><span class="use-symbols__material-iconinfo">Sofa/Lounge (auch Uni Wien, MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span><span class="use-symbols__material-iconinfo">Platzreservierung (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Platzreservierung (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">access_time</span><span class="use-symbols__material-iconinfo">Platzreservierung (Uni Wien, MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span><span class="use-symbols__material-iconinfo">Einzelcarrels (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Snack-, Getränkeautomat">fastfood</span><span class="use-symbols__material-iconinfo">Café-/Snack-, getränkeautomat (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Snack-, Getränkeautomat">local_cafe</span><span class="use-symbols__material-iconinfo"> Café-/Snack-, Getränkeautomat (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Snack-, Getränkeautomat">dining</span><span class="use-symbols__material-iconinfo">Café-/Snack-, Getränkeautomat (MS / MI)</span></div>
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Sehbehindertensitzplatz">blind</span><span class="use-symbols__material-iconinfo">Sehbehindertenarbeitsplatz (MS / MI)</span></a></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span><span class="use-symbols__material-iconinfo">Recherche-P (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span><span class="use-symbols__material-iconinfo">Zugang mit LMU-Card (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span><span class="use-symbols__material-iconinfo">aktive Teilnahme Videokonferenz (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">support_agent</span><span class="use-symbols__material-iconinfo">aktive Teilnahme Videokonferenz (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span><span class="use-symbols__material-iconinfo">Kontrollierte Temperierung (in Uni Wien Klimaanlage, MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Miet-Schließfach">key</span><span class="use-symbols__material-iconinfo">Mietschließfach MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kein Miet-Schließfach">key_off</span><span class="use-symbols__material-iconinfo">Kein Mietschließfach (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">contact_support</span><span class="use-symbols__material-iconinfo">Support im Zeitraum von 9.00 - 12:00 Uhr (MS / MI)</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">live_help</span><span class="use-symbols__material-iconinfo">Support (MS / MI)</span></div>
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Buchscanner">qr_code_scanner</span><span class="use-symbols__material-iconinfo">Selbstverbucher (MS / MI)</span></a></div>
</div>
</div>
Default Symbol Font-Size 24px mit Iconinfo BOLD
<div class="c-use-symbols--default" data-css="c-use-symbols">
<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
<div class="use-symbols__iconarea">
<div class="use-symbols__one-icon is-font-bold"><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
<div class="use-symbols__one-icon is-font-bold"><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
<div class="use-symbols__one-icon is-font-bold"><span class="use-symbols__material-icons" title="Symbol Zahnrad als Settings">settings</span></div>
<div class="use-symbols__one-icon is-font-bold"><span class="use-symbols__material-icons" title="Symbol Check als Haken">check</span></div>
<div class="use-symbols__one-icon is-font-bold"><span class="use-symbols__material-icons" title="Symbol Bolt als Blitz">bolt</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
</div>
</div>
Default mit Symbol Font-Size L
<div class="c-use-symbols--default fsizeL" data-css="c-use-symbols">
<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
<div class="use-symbols__iconarea">
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zahnrad als Settings">settings</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Check als Haken">check</span></div>
<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Bolt als Blitz">bolt</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
</div>
</div>
Default mit Symbol Font-Size XL
<div class="c-use-symbols--default fsizeXL" data-css="c-use-symbols">
<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
<div class="use-symbols__iconarea">
<div class="use-symbols__one-icon is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Benutzerkonto">person</span><span class="use-symbols__material-iconinfo">Benutzerkonto</span></a></div>
<div class="use-symbols__one-icon is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für E-Medien-Login">lock</span><span class="use-symbols__material-iconinfo">E-Medien-Login</span></a></div>
<div class="use-symbols__one-icon is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Öffnungszeiten">access_time</span><span class="use-symbols__material-iconinfo">Öffnungszeiten</span></a></div>
<div class="use-symbols__one-icon is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Leseplatzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Leseplatzreservierung</span></a></div>
<div class="use-symbols__one-icon is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für OPAC Online Katalog">library_books</span><span class="use-symbols__material-iconinfo">OPAC Online Katalog</span></a></div>
<div class="use-symbols__one-icon is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Forschungsdatenmanagement">storage</span><span class="use-symbols__material-iconinfo">Forschungsdatenmanagement</span></a></div>
<div class="use-symbols__one-icon is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für FAQ">live_help</span><span class="use-symbols__material-iconinfo">FAQ</span></a></div>
</div>
</div>
Default mit Symbol Font-Size XL, Schrift Bold und Text unter dem Pictogramm
<div class="c-use-symbols--default fsizeXL" data-css="c-use-symbols">
<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
<div class="use-symbols__iconarea">
<div class="use-symbols__one-icon is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Benutzerkonto">person</span><span class="use-symbols__material-iconinfo">Benutzerkonto</span></a></div>
<div class="use-symbols__one-icon is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für E-Medien-Login">lock</span><span class="use-symbols__material-iconinfo">E-Medien-Login</span></a></div>
<div class="use-symbols__one-icon is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Öffnungszeiten">access_time</span><span class="use-symbols__material-iconinfo">Öffnungszeiten</span></a></div>
<div class="use-symbols__one-icon is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Leseplatzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Leseplatzreservierung</span></a></div>
<div class="use-symbols__one-icon is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für OPAC Online Katalog">library_books</span><span class="use-symbols__material-iconinfo">OPAC Online Katalog</span></a></div>
<div class="use-symbols__one-icon is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Forschungsdatenmanagement">storage</span><span class="use-symbols__material-iconinfo">Forschungsdatenmanagement</span></a></div>
<div class="use-symbols__one-icon is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für FAQ">live_help</span><span class="use-symbols__material-iconinfo">FAQ</span></a></div>
</div>
</div>
RTE
<div class="c-use-symbols--rte" data-css="c-use-symbols">
<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Detailseite</h2>
<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
<div class="use-symbols__iconarea">
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
</div>
</div>
RTEVertical
<div class="c-use-symbols--rte is-vertical" data-css="c-use-symbols">
<h2 class="use-symbols__headline">Iconleiste untereinander mit mehreren Symbolen aus der Font Material Symbols in Detailseite</h2>
<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
<div class="use-symbols__iconarea">
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
</div>
</div>