Link-Icons individualisieren

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.