CODEWITHSUNDEEP
cssfontssassfont-awesome
roxstyle
roxstyle

Reputation: 45

Font Awesome 4.0 new syntax

I started using Font Awesome this week, and now there is an update to 4.0. My questions are:

  1. I have been using the mixin in older versions and just updated the name. Is this okay and legal, etc., since I see a lot of name changes?

    @mixin fa-FontAwesome() {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em; // fixes ie7 issues
}

  2. Can anyone explain the syntax now used? I appreciate any information as I am new and learning SCSS and Font Awesome.

    For example: .#{$fa-css-prefix} uses a number sign and curly brackets in a class name. I would like to understand the logic behind it.

Upvotes: 2

Views: 3516

Answers (2)

Mohamad
Mohamad

Reputation: 35349

  1. Your mixin is just fine.

  2. That syntax uses string interpolation to set the prefix for the Font Awesome base class, which is fa, via a variable.

For example:

$fa-css-prefix: fa;
.#{$fa-css-prefix} { ... }

Will compile to this css:

.fa { ... }

Which is used this way:

<i class="fa fa-camera-retro"></i>
.fa {
  &.fa-camera-retro {
  }
}

In theory, using variables, you can set your own prefix. It doesn't have to be fa.

Upvotes: 2

Shawn Erquhart
Shawn Erquhart

Reputation: 1858

FontAwesome's updated site explains this really well, just read through the examples page.

Upvotes: 0

Related Questions