Font Awesome - Mixin

2023-06-18 186 words One minute views

Contents

This article shows how to use Font Awesome with mixins better.

Import Font Awesome

First of all, in your vedors folder, the _fontawesome.scss, import only what you need from node_modules for the project.

1
2
3
4
5
6
// Also change the font path if you need to
$fa-font-path: '/fonts/webfonts';

@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid";

Note

Dont forget! Use the @import "../route" depending on your project.

Then you need to import Font Awesome from vendors folder intro your main.scss.

1
@import "../vendors/_fontawesome";

The Mixin

You have the @extend so it get’s you the icons from Font Awesome and also the solid ones.

Then the $is-after is basically wheather or not the icon that you want to include inside a component has an :after or :before already.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@mixin fontawesome-icon($icon, $is-after: false) {
  @extend %fa-icon;
  @extend .fa-solid;

  @if $is-after {
    content: fa-content($icon);
    
  } @else {

    &:before {
      content: fa-content($icon);
    }
  }
}

The use case of the mixin

1
2
3
4
5
.status {
  &--success {
    @include fontawesome-icon($fa-var-check, false);
  }
}