css • FontAwesome - martindubenet/wed-dev-design GitHub Wiki

Useful SASS mixin for FA icons

// pigments for .fa:before:hover
@mixin linkIconColor_hover ( $colorBase, $colorHover ) {
    &:before {
        color: $colorBase;
    }

    &:hover, &:focus {
        &:before {
            color: $colorHover;
        }
    }
}

FontAwesome utility classes for Atomic CSS

Add the following CSS class within the DOM of the document to style it according to FontAwesome styling librairy.

CSS class Description & link to doc
data-fa-transform[] Transforms
data-fa-mask=[] Masking
fa-border Bordered wraps the icon within a border
fa-spin Rotating icon
fa-stack >
  {fa-stack-2x} + {fa-stack-1x}		 Stacked Icons
fa-stack-2x = container
fa-stack-1x = contained
fa-layers >
  {fa-layers-text fa-inverse}		 Layering, Text, & Counters
fa-inverse = Inverts color to White
<ul class="fa-ul">
  <li>
    <span class="fa-li">
      <i class="fas fa-check-square"></i>
    </span>
      …
  </li>
  <li>…</li>
</ul> 		Icons in a list
fa-pull-left
fa-pull-right 		Pulled icons
Adds float right/left attribute and according margin-* right/left values to the icon.

 

Extending FontAwesome’s mixins within my SCSS

Download latest FontAwesome librairy using they're NPM package manager : npm install --save @fortawesome/fontawesome-free.

One I have the FA librairy downloaded within my ~/node_modules/repository, I create 2 custom SCSS files dedicated to manage their library within my project without editing they're package since I don't want to edit their stuff;

  1. _variables.fontawesome5.scss
  2. _import.fontawesome5.scss

_variables.fontawesome5.scss

@import "~/@fortawesome/fontawesome-free/scss/_variables.scss";
$fa-font-path: "/css/fontawesome5/webfonts"; // this var over-rules de !default one from the above « _variables.scss »
@import "~/@fortawesome/fontawesome-free/scss/_mixins.scss";

_import.fontawesome5.scss

This is my customized version of ~/@fortawesome/fontawesome-pro/scss/fontawesome.scss

/*!
 * Font Awesome Pro 5.0.13 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * --------------------------------
 * Wiki: teccenters.atlassian.net/wiki/x/ZADFGQ
 */

// required for FA to load
@import "_variables.fontawesome5.scss"; // custom file

@import "~/@fortawesome/fontawesome-free/scss/_core";
@import "~/@fortawesome/fontawesome-free/scss/_larger";
@import "~/@fortawesome/fontawesome-free/scss/_fixed-width";
@import "~/@fortawesome/fontawesome-free/scss/_list";
@import "~/@fortawesome/fontawesome-free/scss/_bordered-pulled";
@import "~/@fortawesome/fontawesome-free/scss/_animated";
@import "~/@fortawesome/fontawesome-free/scss/_rotated-flipped";
@import "~/@fortawesome/fontawesome-free/scss/_stacked";
@import "~/@fortawesome/fontawesome-free/scss/_icons";
@import "~/@fortawesome/fontawesome-free/scss/_screen-reader";

// load each font-family individually
@import "~/@fortawesome/fontawesome-free/scss/solid";    // fas
@import "~/@fortawesome/fontawesome-free/scss/regular";  // far
@import "~/@fortawesome/fontawesome-free/scss/light";    // fal
@import "~/@fortawesome/fontawesome-free/scss/brands";   // fab
//@import "~/@fortawesome/fontawesome-pro/scss/duotone";  // fad

Extending FontAwesome’s within my SCSS files

How to @extend

Here’s an example of that extend FA’s mixins and classes within our custom Sass file.

You can view the end result in this CodePen page

SCSS
// local variables
$iconSize: 2rem;
$li_verticalPadding: 1rem;
//

/*
* ITALIC TAG
* Relying on `<i>` tags in the DOM, as proposed by FontAwesome.
*/
i {
  font-style: normal;
  display: inline-block;
  text-align: center;
  font-size: $iconSize;
}
.icon,
.i-icon>i {
  &:before {
    //
    @include fa-icon;
    @extend .fas;
    font-weight: 900; // known bug fix related
  }
}
/* 
* BACKGROUND ICONS
* Works on any block containers within the DOM
*/
.bg-icon {
  padding: $li_verticalPadding 0 $li_verticalPadding ($iconSize + 0.25rem);
  background-color: #eee;
  &:before {
    font-size: $iconSize;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -(($iconSize /2) + ($li_verticalPadding /2));
    //
    @include fa-icon;
    @extend .fas;
  }
}
/* 
* MAPPING CUSTOM CLASS to FA
* Use literal ready nomenclature for your class names
*/
.ico-user-rating-true,
.ico-bug-false,
.ico-evaluation-good {
  &:not(.i-icon),
  &.i-icon>i{
    &:before {
      content: fa-content($fa-var-thumbs-up);
    }
  }
}

You can view the end result in this CodePen page

Bootstrap alert components

This example is based on Bootstrap (v.4) Alerts.

HTML
<div class="alert alert-warning with-icon">
    <i></i>
    <h3>Warning!</h3>
</div>
SCSS
@charset "UTF-8";
@import "_import.fontawesome5.scss";
@import "_import.bootstrap4.scss";

.alert {
    &.with-icon {
        display: flex;
        align-items: center;
        min-height: 3rem;
        padding-left: 4rem;
        //
        & > i {
            position: absolute;
            top: 0.5rem;
            left: 1rem;
            @include fa-icon;
            @extend .fas !optional; // this mixins used to be buggy so I had the `font-weight` after as a backup
            font-weight: 900;
            font-size: 2rem;
            text-shadow: 0px 0px 10px rgba(white, 0.9); // this allow more contrast
        }
        // Red
        &.alert-danger > i::before {
            content: fa-content($fa-var-exclamation-circle);
            color: $danger;
        }
        // Blue
        &.alert-info > i::before {
            content: fa-content($fa-var-exclamation-circle);
            color: $info;
        }
        // Green
        &.alert-success > i::before {
            content: fa-content($fa-var-check-circle);
            color: $success;
        }
        // Yellow
        &.alert-warning > i::before {
            content: fa-content($fa-var-exclamation-triangle);
            color: $warning;
        }
    }
}
My wikis

[ Content edition ][ Web dev & design ][ PHP ][ Wordpress ] md

MartinDube.net

⚠️ **GitHub.com Fallback** ⚠️