Utilisation de FontAwesome avec Sass

Que de travail pour moi:

1. Exécutez la commande:

   npm install font-awesome --save-dev
   

2. Ajoutez ces lignes à l'index.scss:

   $fa-font-path: "~font-awesome/fonts";
   @import "~font-awesome/scss/font-awesome";
   

Cette méthode fonctionne, mais vous devez télécharger l'intégralité du dossier fontawesome chaque fois que vous configurez un nouveau projet et lier tous les fichiers. En installant SASS Ruby Gem, vous pouvez éviter un travail supplémentaire.

Open Terminal and do:
gem install font-awesome-sass
Remember that you should have administrator rights on your computer.
If you are an administrator and getting this:

ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

Try to install as super user:
sudo gem install font-awesome-sass
You’ll need to enter your password.

You should get this if installation was successful:

Successfully installed font-awesome-sass-4.1.0
Parsing documentation for font-awesome-sass-4.1.0
1 gem installed

Next open your sass file and import font-awesome library:
@import "/Library/Ruby/Gems/2.0.0/gems/font-awesome-sass-4.1.0/vendor/assets/stylesheets/font-awesome";
I am a mac user and in my case the gem is installed into this location. You should figure out where it stores on your windows machine.
It’s important to use absolute path. It won’t work if you do:
@import "font-awesome”Because you installed ruby gem, it is not part of compass (as I mistakenly thought in the beginning).

Download fontAwesome from fontawesome.io and unzip it. Copy font-awesome fonts into your css folder under fonts directory. Like here:
Screen Shot 2014-08-28 at 2.14.07 PM

In your .sass add a font-face FontAwesome somewhere on top of the file:

@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("fonts/fontawesome-webfont.woff") format("woff"),
url("fonts/fontawesome-webfont.ttf") format("truetype"),
url("fonts/fontawesome-webfont.svg") format("svg");
font-weight: normal;
font-style: normal;
}

All set
Now you can use fontAwesome in your project!
Use FontAwesome inline with <i></i> tag or you can use it via @extend method in your SASS.
Inline method example:

Insert an <i></i> tag where you need it and add classes .fa (default for all icons) and .fa-[icon-name]
<i style="margin:12px;" class="fa fa-camera-retro"></i>

More details about this method you’ll find here
fontawesome website

SASS @extend method example:

$your_selector {
  @extend .fa;
  @extend .fa-camera-retro;
  font-family: $verdana;
  &::before {
    font-family: "FontAwesome";
  }
}

Étapes pour installer la police personnalisée-awesome sass.

1. Télécharger la police-génial dossier et l'extraire.

2. Ouvrez le dossier extrait > > font-awesome / scss, vous y trouverez la police-awesome.scss et font-fichiers partiels impressionnants. déplacez tous ces fichiers dans le dossier scss de votre projet.

3. Déplacez le dossier Polices qui se trouve dans le dossier font-awesome vers votre dossier projets > > Project / fonts

4. Ouvrez le _varaible.scss et changer le chemin comme

$fa-police-chemin: "../fonts" !default; {votre chemin relatif pour les polices dans ce cas, il est ../../ polices}

1. lier la police-génial.css à votre fichier d'en-tête.

Maintenant, vous êtes tous ensemble

Https://fortawesome.github.io/Font-Awesome/get-started/

Me font-awesome par

yarn add font-awesome ou

bower install font-awesome (non recommandé)

Allez maintenant dans le répertoire font-awesome et copiez le dossier fonts et collez-le un dossier vers le haut le dossier css ou le dossier scss. Par exemple:

./ ./bower_components/* ./node_modules/* ./styles/main.scss ./fonts ./index.html

Fait!

Une autre méthode si vous ne voulez pas copier le dossier fonts consiste à ajouter les lignes suivantes dans votre fichier main.scss:

$fa-font-path: "../bower_components/font-awesome/fonts/"; @import "../bower_components/font-awesome/scss/font-awesome";