how to alias class name in css or sass

There's no such thing as aliasing. Sass does have the @extend directive, but the solution isn't entirely obvious until you look into the source.

Source: https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.scss

[class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; } // snip .icon-globe:before { content: "\f0ac"; } 

Even if you made .globe extend .icon-globe, you'll be missing out on most of what makes the FontAwesome styles because of how they built the selector. You have to extend the other selector as well.

This:

.globe { @extend .icon-globe; @extend [class^="icon-"]; } 

compiles to

[class^="icon-"]:before, .globe:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; } .icon-globe:before, .globe:before { content: "\f0ac"; } 

Note that the icon- prefix was deliberate. You get smaller CSS files this way, rather than attaching all of those styles to all ~200 classes that come with FontAwesome. You can do it, but I don't think the result is very good.

Easiest way I can think of is to use javascript/jquery.

jQuery:

$(document).ready(function() { $('.globe').addClass('icon-globe'); }); 

I know this is an older question but I am answering this because the thread looks incomplete...

You can easily do this with SASS by extending the icon-globe class

.globe{ @extend .icon-globe !optional; } 

The output CSS will be as,

.globe,.icon-globe{ /* CSS Properties */ } 

Considering the new class names of Font-Awesome, you will be need to using the .fa-globe with multiple class extending

.globe{ @extend .fa, .fa-globe !optional; } 

The output CSS will be as,

.fa,.globe{ /* ... */ } .globe,.fa-globe{ /* CSS Properties */ } 

You can apply the same styles to several classes using plain css comma separated selectors:

.icon-globe, .globe { //styles } 

Will apply the same styles to <i class="icon-globe"> and <i class="globe">.

You can use SASS mixin @content to create an alias for a selector or combination of them like this:

@mixin icon { .icon-globe, .globe { @content; } } @include icon { font-size: 16px; } 

SASS will generate this for you:

.icon-globe, .globe { font-size: 16px; } 

Read more about SASS mixin content block;

You may be interested in CSS Crush which allows you to create aliases http://the-echoplex.net/csscrush/#core--selector-aliases

Usage

@selector globe :any( .icon-globe, .globe ); :globe { color: red; } 

Outputs

.icon-globe, .globe { color: red; }