comment alias nom de classe dans css ou sass

Il n'y a pas une telle chose comme l'aliasing. Sass a le @extend directive, mais la solution n'est pas tout à fait évidente jusqu'à ce que vous examiniez la 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"; }

Même si vous avez fait .globe étendre .icon-globe, vous allez manquer la plupart de ce qui fait les styles FontAwesome à cause de la façon dont ils ont construit le sélecteur. Vous devez étendre l'autre sélecteur comme suit: bien.

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

Produit:

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

notez que le icon- le préfixe était délibéré. Vous obtenez des fichiers CSS plus petits de cette façon, plutôt que d'attacher tous ces styles à toutes les ~200 classes qui viennent avec FontAwesome. Vous le faire, mais je ne pense pas que le résultat est très bon.

la façon la plus simple que je puisse imaginer est d'utiliser javascript/jquery.

jQuery:

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

je sais que c'est une question plus ancienne, mais je réponds parce que le fil semble incomplet...

vous pouvez facilement faire cela avec SASS en prolongeant le icon-globe classe

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

La sortie de CSS,

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

compte tenu de la nouvelle classe des noms de font-Awesome, vous aurez besoin de l'aide de l' .fa-globe avec classes multiples s'étendant

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

La sortie de CSS,

.fa,.globe{
 /* ... */
}

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

vous pouvez appliquer les mêmes styles à plusieurs classes en utilisant des sélecteurs séparés par une virgule:

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

appliquera les mêmes styles <i class="icon-globe"> et <i class="globe">.

Vous pouvez être intéressé par CSS Crush qui vous permet de créer des alias http://the-echoplex.net/csscrush/#core--selector-aliases

Utilisation

@selector globe :any( .icon-globe, .globe );

:globe {
  color: red;
}

Sorties

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

ni L'un ni l'autre SASS ni CSS3/4 supportez les alias. Vous devez utiliser exactement le nom de la classe si vous souhaitez utiliser police génial.