Extending multiple FA* styles within a custom Sass = Bug

[martindubenet]

Extending multiple FA* styles within a custom Sass file renders only one style in the compiled CSS

I have a rating stars component to design with our CMS solution. So I want to avoid depending on HTML markup that can get corrupted by site editors when posting new content. For that reason I integrated FontAwesome 5 PRO using « Web fonts with CSS », over the « SVG with Javascript » option, and everything seemed to work fine... Until I had needed both font styles Solid and Regular to render side by side.

So far I've been able to render FAR icons within my localhosted (for now) solution by extending FontAwesome's Sass library. My problem is that I'm unable to render any other styles then that REGULAR via including+extending FA class names.

Requirements

• Design requirements : Rating score of 50% with Stars
• Half star design delemma using fa-star : FontAwesome requires multiple styles

Environment

• PRO licenced
• Loading it using Web Fonts with SCSS method, @includ and @extend, as promoted in the documentation.

My Bugged Result

• Bug demo on CodePen: « Bug: Extending FontAwesome 5 fa* within my custom SASS files »
• Missing fas style : Screenshot from my localhost

Maybe I'm not coding it the proper way!?

My custom HTML source

<div class="score-value" title="50%">
    <strong itemprop="ratingValue">2.5</strong>
</div>
<div class="score-icons five-icons" data-rounded-icons="2 half">
    <i class="icon ico-star first-icon"></i>
    <i class="icon ico-star second-icon"></i>
    <i class="icon ico-star third-icon"></i>
    <i class="icon ico-star fourth-icon"></i>
    <i class="icon ico-star fifth-icon"></i>
</div>

My custom SCSS code

.icon {

    @include fa-icon;
    @extend .far;     // regular 👍
    &.fill {
        @extend .fas; // solid 👎 
    }
    &.light {
        @extend .fal; // light
    }
    &.logo {
        @extend .fab; // brands (note: this term conflicts with Bootstrap's library)
    }

    &.ico-star {
        // whole + outlined (default)
        &:before {
            content: fa-content($fa-var-star); //👍
        }
        // half + outlined
        &.half:before {
            content: fa-content($fa-var-star-half); //👍
        }
        // whole + filled
        &.fill:before {
            content: fa-content($fa-var-star);
        }
        // half + filled
        &.fill.half:before {
            content: fa-content($fa-var-star-half);
        }
    }
}

[tagliala]

Hi,

just some hints, not a solution, at the moment.

I think that this is not an issue

If you wanto to switch icon style, you just need to change the font weight from 400 to 300 or 900. Ref: https://fontawesome.com/how-to-use/web-fonts-with-css#basic-use

So, something like

.icon {
  @include fa-icon;
  @extend .far;

  &.fill {
    font-weight: 900;
  }

  &.light {
    font-weight: 300;
  }
}

Also, content: fa-content($fa-var-star); is going to return the same result, so you could remove the duplicate code

&.ico-star {
  &:before {
    content: fa-content($fa-var-star); //👍
  }
  &.half:before {
    content: fa-content($fa-var-star-half); //👍
  }
}

[martindubenet]

@tagliala that is a marvelous hint! I completely missed that font-weight details from their documentation.

[leqwasd]

SCSS extend creates these these bugs, by messing up the order of things.
If there are provided these kinds of "helpers", why shouldn't we be able to use them? Why would we have to know, that that specific font-weight switches things, if there are these helpers, that abstract these things.

Given this scss

    &>.NavLink:after {
        @include fa-icon;
        @extend .fas;
        content: fa-content($fa-var-chevron-right);
    }

Produces this output:

The font-weight is set by .fas class, then overridden by fa-icon mixin. In the result, icon is not rendered correctly.

Switching things on/off I noticed - @extend .fas adds all of the properties necessary for the icon. And @include fa-icon just resets them...

    &>.NavLink:after {
        //@include fa-icon;
        @extend .fas;
        content: fa-content($fa-var-chevron-right);
    }

So removing @include fa-icon fixes the problem, I would guess if OP would remove it, all of his cases would work correctly!

And perhaps doc's or examples should be updated by removing @include part?

[moraleslevi]

Thanks @leqwasd! Was confused why my Sass implementation wasn't working (following the docs). Removing @include fa-icon; solved this issue for me.

[cfbauer]

Wow this makes me so mad. Using the paid version and I spent 3 hours debugging trying to figure out why this wasn't working, turns out the documentation is just wrong.

THANK YOU @leqwasd!

[tagliala]

@cfbauer sorry for the troubles and thanks for the heads-up

I can see that the documentation at https://fontawesome.com/how-to-use/on-the-web/using-with/sass#mixins has been partially changed to extend %fa-icon instead of @include (which is still mentioned in the section) and the example produces the correct output:

@import "./fontawesome/scss/fontawesome.scss";
@import "./fontawesome/scss/regular.scss";
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/brands.scss";

.user {
  @extend %fa-icon;
  @extend .fas;

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

.user-regular {
  @extend %fa-icon;
  @extend .far;

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

.twitter {
  @extend %fa-icon;
  @extend .fab;

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

Output:

How are you loading the scss files in you project?

Any chance that you are using https://github.com/FortAwesome/font-awesome-sass ?