Link-Icon mit Background-Image

Hier wird ein SVG als Hintergrundbild verwendet. Die Farbe ist in der SVG Datei festgelegt.

• Kurzvorstellung von Stylesheets
• Syntax von CSS
• Wichtige Properties
• CSS Selektoren

  background-image:    url(link.svg);
  background-position: center right;
  background-repeat:   no-repeat;
  padding-right:       14px;
  

Hier wird ein SVG als Maske verwendet. Die Farbe des Icons wird in CSS als Hintergrundfarbe definiert.

• Kurzvorstellung von Stylesheets
• Syntax von CSS
• Wichtige Properties
• CSS Selektoren

  #mask a:link::after, #mask a:visited::after {
    content: " ";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: lightblue;
    mask-image: url(link.svg);
    -webkit-mask-image: url(link.svg);
  }
  #mask a:link::after {
    background-color: blue;
  }
  #mask a:visited::after {
    background-color: violet;
  }