Font Awesome im Link-Element nutzen

15. März 2024

link font awesome verlinkung verweise icons

Die Font Awesome Icons lassen sich über eine CSS-Only-Variante auch zum Link-Element nutzen.

Im aktuellen BASE Projekt nutzen Sie Font Awesome Icons über eine schon im Standard verfügbare CSS-Only-Variante.

Beispiel: Auszug aus der elementLink.scss zu Font Awesome Varianten 115 und 116

/* ... */

/*@wCssFragment{class:elementLink;variant:115;caption:Schaltfläche transparent mit Font-Awesome Icon;caption-en:Button transparent with Font-Awesome Icon;livepreview:yes}*/
.elementLink_var115 {
  
  -w-editmaskExtended-anchorClass:no;
  -w-editmaskExtended-fontAwesomeIcon:yes;  
  
  -w-subvariants:position=0;

  overflow:hidden;
  
  > a {
    @extend .linkButtonGhost;   
  }
  
  & + & {
    margin-top:(-$marginBottomText * 0.75);
  }  
}

/*@wCssFragment{class:elementLink;variant:116;caption:Schaltfläche transparent mit Font-Awesome Icon dahinter;caption-en:Button transparent with Font-Awesome Icon behind it;livepreview:yes}*/
.elementLink_var116 {
  
  -w-editmaskExtended-anchorClass:no;
  -w-editmaskExtended-fontAwesomeIcon:yes;  
  
  -w-subvariants:position=0;

  overflow:hidden;

  > a {
    @extend .linkButtonGhost; 
    display:flex;
    flex-direction:row-reverse;
    
    &.iconFa .linkIconFa {
       margin:0 -3px 0 6px;    
    }
  }
  
  & + & {
    margin-top:(-$marginBottomText * 0.75);
  }  
}

/* ... */

Die Bearbeitungsmaske des Link-Elements ermöglicht dann die Auswahl der über das (ggf. noch zu installierende) Weblic® "Font Awesome Icons" zur Verfügung stehenden Icons.