Font Awesome Pro Icons 🎉

TIP

Font Awesome Pro (Version 6) (opens new window)

Include the following CSS-file from the PatternLab Contrib-folder in your project, e.g.: <link rel="stylesheet" href="node_modules/@pharma4u/patternlab/resources/contrib/@fortawesome/fontawesome-pro/css/all.css">

hide code

<div class="h-flex h-space-between">
<span class="fas fa-info-circle"></span>
<span class="fas fa-exclamation-triangle"></span>
<span class="fas fa-exclamation-circle"></span>
<span class="fas fa-question-circle"></span>
<span class="fas fa-arrow-right"></span>
<span class="fas fa-arrow-left"></span>
<span class="fas fa-chevron-down"></span>
<span class="fas fa-chevron-up"></span>
<span class="fas fa-lock"></span>
<span class="fas fa-times"></span>
<span class="fas fa-download"></span>
<span class="fas fa-envelope-open"></span>
</div>

FA Size Modifiers

.fa-3x, .fa-2x, .fa-1-5x

hide code

<span class="fas fa-info-circle fa-3x"></span>
<span class="fas fa-info-circle fa-2x"></span>
<span class="fas fa-info-circle fa-1-5x"></span>

More: Sizing Icons (opens new window)

FA Helper Classes

See Styling with Font Awesome (opens new window)

• .fa-rotate-[90, 180] or specific value: .fa-rotate-by+ style="--fa-rotate-angle: 45deg;"

• .fa-flip-[horizontal, vertical, both]

• .fa-fw - for fixed widths

FA Animations

See Animations with Font Awesome (opens new window)

Example:

.fa-beat

hide code

<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i class="fa-solid fa-heart fa-bounce"></i>
  <i class="fa-solid fa-heart fa-beat-fade"></i>
  <i class="fa-solid fa-heart fa-fade"></i>
</div>

Add Icons per Class

Arrow Icons can be added per modifier class to links or buttons.

.-icon-right[-icon-left, -icon-up, -icon-down].-icon-arrow

-icon-right -icon-arrow -icon-right -icon-arrow

-icon-up -icon-arrow -icon-down -icon-arrow

hide code

<div class="h-flex h-space-around h-flex-row h-vertical-center">
<a href="" class="c-btn -small -secondary -icon-right -icon-arrow">
    <span class="c-btn__text">-icon-right -icon-arrow</span>
</a>
<a href="" class="c-btn -small -primary -icon-left -icon-arrow">
    <span class="c-btn__text">-icon-right -icon-arrow</span>
</a>
</div>
<div class="h-flex h-space-around h-flex-row h-vertical-center m-t-l">
<a href="" class="c-btn -small -secondary -icon-up -icon-arrow">
    <span class="c-btn__text">-icon-up -icon-arrow</span>
</a>
<a href="" class="c-btn -small -primary -icon-down -icon-arrow">
    <span class="c-btn__text">-icon-down -icon-arrow</span>
</a>
</div>

Rotate arrow icon via modifier .-rotate-arrow.

---

Icon-Map: Use Icons as pseudo-elements in SCSS

In the SCSS-files you can use the $fa-icon-map if you need a font-awesome icon as pseudo-element. Common icons are included in this map, so you don't have to look for the unicode.

(See core/typ/_icon-font.scss for the full list.)

$fa-icon-map: (
        arrow-left: '\f060',
        arrow-right: '\f061',
        arrow-down: '\f063',
        arrow-down-to-line: '\f33d',
        arrow-up: '\f062',
                (...)
);

/**
 * usage: @include fa-icon("minus");
 */
@mixin fa-icon($name) {
    content: map-get($fa-icon-map, $name);
}

Icon SCSS-Variable

// selector variables
// use like this: #{$fa} 

$fa: "*[class^=" fa "]";
$fa-icon: "*[class^=" fa "]::before";