49

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?

Improve this question
1
  • Do any of the Sass answers work in runtime? I need to re-assign a class alias dynamically. Commented Oct 14, 2024 at 12:59

6 Answers 6

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

27

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

jQuery:

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

8 Comments

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 :)
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.
You asked for a comment about the downvote, so I left one. No need to get defensive.
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.
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.
|
17

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 */ }
Improve this answer

Comments

5

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

Improve this answer

2 Comments

Thanks. Will only work if I define the styles in this block? The thing is, don't want to modify the font-awesome file.
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.
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;

Improve this answer

1 Comment

This is a much saner response for 2019 than using jQuery
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; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.