48

Can I create an alias to a css class?

I am using this font-awesome and I am trying to create an alias name for some of the icon classes. So that .icon-globe will also called .globe.

How can I accomplish such thing?

0

6 Answers 6

28

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.

0
26

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

jQuery:

$(document).ready(function() {
  $('.globe').addClass('icon-globe');
});
8
  • 4
    To the person who downvoted my answer, please leave a comment if you feel that the code is inadequate, or edit my answer and I'll be happy to review your request :) Commented Jul 24, 2014 at 17:03
  • 5
    Old Question ...though , but it is clear that the caller is not asking this. What they want to know is how they can start using .globe , instead of using .icon-globe.
    – Scalable
    Commented Sep 9, 2015 at 13:10
  • 3
    You asked for a comment about the downvote, so I left one. No need to get defensive. Commented Sep 22, 2015 at 0:26
  • 8
    Answers from people like OneChillDude that demonstrate an ability to recognize the root problem a quesiton is asking about and help solve that (as opposed to "you can't do exactly what you asked about") is precisely why we come to SO.
    – jpw
    Commented Mar 23, 2017 at 20:56
  • 1
    For me, this answer feels like this: How can I change my REST endpoint to return a different object? and then the response Use jQuery to change that stuff on the UI. - OP did not mention jQuery in their post. I was looking for a way to structure SCSS better with silly long class names that would hurt readability. So I disagree with @jpwynn , my root problem is different and I don't even have jQuery in my project.
    – andras
    Commented Dec 20, 2019 at 9:31
18

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 */
}
5

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;

1
  • 1
    This is a much saner response for 2019 than using jQuery
    – andras
    Commented Dec 20, 2019 at 9:32
4

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">.

2
  • 2
    Thanks. Will only work if I define the styles in this block? The thing is, don't want to modify the font-awesome file.
    – bymannan
    Commented Nov 11, 2012 at 21:32
  • 1
    Yes also, in some case, I may not have 'access' to the class like or may not want to invest energy to find where it is defined.
    – Scalable
    Commented Sep 9, 2015 at 13:12
3

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.