Icon: Appended

Ready

HTML
View
Context
Assets
Info
Notes


        
        Learn more about the subject<span class="appendedIcon">&zwj;<i class="fas fa-angle-right"></i></span>


        {{text}}<span class="appendedIcon">&zwj;<i class="{{iconClass}}"></i></span>


        
            
            {
  "text": "Learn more about the subject",
  "iconClass": "fas fa-angle-right"
}

File:

Content:
import "./icon.scss";
URL: /components/raw/icon/icon.js
Filesystem Path: src/components/icon/icon.js
Size: 22 Bytes

Content:


                                @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();
}

URL: /components/raw/icon/icon.scss
Filesystem Path: src/components/icon/icon.scss
Size: 400 Bytes

Handle: @icon--appended
Variants (2): Appended , Prepended
Preview:
- With layout
- Component only
Filesystem Path: src/components/icon/icon.twig
Referenced by (13): @author-card, @callout, @callout-news, @card, @card--bay-tip, @card--blog, @card--fact, @card--public-access, @media-object, @media-object--cta, @media-object--no-'read-more', @media-object--vertical, @type

Font Awesome

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.

Credits

Thanks to snook.ca for the solution for preventing icon wrap after text.