Link-Icons (SVG) individualisieren
Veröffentlichungsdatum: 14. Juli 2020
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Um Verweise innerhalb des BASE Projektes hervorzuheben und passend zum Link-Ziel zu gestalten, liegt der Einsatz von Grafiken nahe.
Die BASE nutzt hierfür SVG-Icons, welche über SCSS eingebettet zudem mit Farbe befüllt werden können:
Beispiel: Auszug aus der html.scss des globalen Projektes zu Verweisen
/* ... */ body, .isLightBackground, .isDarkBackground .isLightBackground, .isDarkBackground .isInverseBackground { a.intern:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/intern.svg?stroke=#{$colorLinkIcon}")} a.extern:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/extern.svg?stroke=#{$colorLinkIcon}")} /* ... */ } .isDarkBackground, .isLightBackground .isDarkBackground, .isInverseBackground, .isLightBackground .isInverseBackground { a.intern:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/intern.svg?stroke=#{$colorLinkIconInverse}")} a.extern:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/extern.svg?stroke=#{$colorLinkIconInverse}")} /* ... */ }
Durch den Einsatz eigener Icons können Sie Ihr Projekt weiter individualisieren. Ersetzen Sie dazu die bestehenden Icons durch eigene Bilder bzw. passen den Pfad zum Icon auf das gewünschte Icon an.
Icons mit individueller Farbe befüllen
Ab Weblication® CMS-Version 15 und aktuellem Link-Weblic® können Sie anstatt der Standardfarbe der Icons auch ein Auffüllen mit einer individuellen Farbe vornehmen. Hierzu legen Sie eine CSS-Only Untervariante zu IconColor in der elementLink.scss an und definieren unter den allgemeinen Einstellungen die Untervariante "iconColor" als auswählbar bzw. pflegbar. Diese Untervariante kann somit in der Linkbearbeitung entsprechend gewählt werden ("Farbe des eigenen Icons").
Damit ein Überschreiben des stroke-Parameters in der html.scss greift, müssen Sie diese Definition noch explizit mit Bezug auf die Untervariante in der html.scss definieren.
Beispiel: Auszug aus der elementLink.scss mit IconColor-Untervariante 5
/*@wCssFragment{class:elementLinkIconColor;variant:5;caption:Linkfarbe;caption-en:Link color;preview-color:#009900;livepreview:no}*/ .elementLinkIconColor_var5 { -w-option-iconColor:#009900; /* Farbe des Icons */ }
Beispiel: Auszug aus der html.scss zum individuell befüllten Telefon-Icon
/* ... */ .elementLinkIconColor_var5 { span.phone:before, a.phone:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/phone.svg?stroke=#009900")} }
if-Anweisung zum Befüllen nutzen
Ab CMS-Version 17 kann die dynamische Farbe auf eine bestehende Farbe beschränkt werden, indem dies über eine if-Anweisung definiert wird.
Im Beispiel nebenan wird das pdf.svg Icon nur dann mit der Farbe aus $baseColorPrimary1 (z.B. #207CB5) befüllt, wenn die fill-Angabe in der Original-Datei den Wert #000000 hat.
Beispiel: Auszug aus der html.scss zum individuell befüllten PDF-Icon per if
/* ... */ a.pdf:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/pdf.svg?fill=#{$baseColorPrimary1}if#000000")}