CODEWITHSUNDEEP
csssassfont-awesome
joshmoto
joshmoto

Reputation: 1760

Importing font awesome in SASS and applying icons to elements using uni code

Any light that could be shed on this would be hugely appreciated.

I have a SPAN in which I'm not able to apple the fontawesome FA class to this span. So I need to write a custom style to add the icon to my SPAN.

And I'm using SASS for my stylesheets.

OK, in my vendor.scss I am importing font awesome like so..

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

And font awesome works a treat when using their defined classes..

<i class="fa fa-camera-retro fa-lg"></i>

But when I try and create my own by using css content it does not work? See below..

.addthis_sharing_toolbox {

    SPAN {
        color: #ffffff;
        background: #000000;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
    }

    .at-svc-facebook SPAN {
        content: '#f09a';
    }

    .at-svc-twitter SPAN{
        content: '#f099';
    }

    .at-svc-google_plusone_share SPAN {
        content: '#f0d5';
    }

}

Can anyone see where I'm going wrong?

Thanks

Upvotes: 1

Views: 752

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9567

You can't use Unicode like that in CSS. You need to format it with a backslash in place of your pound marker.

Example

.at-svc-twitter span:before {
  content: '\f099';
}

Also, content is only valid when in use with pseudo elements in CSS. So we need to set it on the :before pseudo instead of the span option.

Upvotes: 2

Related Questions