<i class="prependedIcon fas fa-check-circle"></i>Success!
<i class="prependedIcon {{iconClass}}"></i>{{text}}
{
"text": "Success!",
"iconClass": "fas fa-check-circle"
}
import "./icon.scss";
@use "../_layout/mixins";
.appendedIcon {
margin-inline-start: var(--adjacentIconGap, 0.3em);
display: inline;
white-space: nowrap;
}
.prependedIcon {
margin-inline-end: var(--adjacentIconGap, 0.3em);
}
.faSymbol {
width: var(--faSpriteWidth, 1.25em);
height: var(--faSpriteHeight, 1.25em);
vertical-align: -0.125em;
}
.fa-angle-right, .fa-angle-left {
@include mixins.boldIcon();
}
When possible, icons should be used from Font Awesome using a kit on the web team’s Pro account. The kit should use the SVG option (not webfont).
For custom icons, if they are ‘solid’, use the custom icon feature to upload an SVG to Font Awesome.
Thanks to snook.ca for the solution for preventing icon wrap after text.