web-dev-qa-db-fra.com

Utilisation de Font Awesome avec Sass

J'essaie d'utiliser FontAwesome dans un projet Web Compass. Comme il n’ya pas de documentation spécifique dans la page FontAwesome , et que je n’utilise pas Bootstrap, j’ai suivi la rubrique "Ne pas utiliser Bootstrap?". directions mais ne peut pas le faire fonctionner.

Le résultat

Je ne reçois aucune erreur spécifique, que ce soit introuvable ou en compilant des erreurs. Cela ne montre rien, aucune icône ou texte. Les fichiers de police FontAwesome ne semblent pas se charger.

Les pas que j'ai faits

  1. Télécharger le répertoire font-awesome
  2. Copiez-le dans le dossier css de mes projets, où j'ai tous mes css compilés: project/css/font-awesome
  3. Importez le fichier font-awesome.scss dans ma feuille de style sass principale comme ceci @import url("font-awesome/scss/font-awesome.scss");
  4. Ouvrez le fichier font-awesome.scss et modifiez les chemins d’importation afin qu’ils soient maintenant relatifs à mon fichier compilé css et ressemblent à ceci @import url("font-awesome/scss/_variables.scss");
  5. Ouvrez le _variables.scss partiel dans le répertoire font-awesome/scss et modifiez le @FontAwesomePath de celui par défaut en "font-awesome/font/" pour qu'il corresponde à l'emplacement des polices Web.
  6. Dans mon fichier html, ajout d'un exemple après celui de la page Exemples de FontAwesome , j'ai donc ajouté un <i class="icon-camera-retro"></i> Some text

  7. Dans mon fichier sass principal, ajout de la déclaration @font-face 

    @include font-face('FontAwesome',
font-files(
'font-awesome/font/fontawesome-webfont.woff', woff,
'font-awesome/font/fontawesome-webfont.ttf', ttf,
'font-awesome/font/fontawesome-webfont.svg', svg),
'font-awesome/font/fontawesome-webfont.eot');

 %icon-font {
     font-family: 'FontAwesome', Helvetica, Arial, sans-serif;
  }

  8. Étendre la police dans le sélecteur 

    .icon-camera-retro {
    @extend %icon-font;
 }

  9. Compiler ma feuille de style sass principale en utilisant compass --watch sans erreur

  10. Tout téléchargé


Pour clarifier, voici la structure de mon projet:

root
    sass
        mainsass.scss
    css
        font-awesome
            css
                font-awesome.css
            font
                font-archives.ttf/.woff/etc
            scss
                _partials (_variables.scss, _path.scss, _core.scss, etc)
                font-awesome.scss
        fonts
            some-custom-font.ttf
        mainsass.css


Donc, si quelqu'un a lu jusqu'ici, ce que j'apprécie déjà, des idées, s'il vous plaît?

sasscompass-sassfont-awesome
24
ithil

Ok, j'ai eu de l'aide avec ça et il y avait plusieurs problèmes avec les chemins qui étaient le problème principal. Je les expliquerai ici au cas où cela aiderait quelqu'un dans ma position.

Le problème était: en effet, les fichiers de polices ne se chargeaient pas

Les erreurs: principalement liées aux chemins et au comportement de compass & sass avec @import

Les corrections apportées à mes étapes ci-dessus:

1) Vous ne pouvez pas vous tromper sur celui-là ...

2) Tout d’abord, ne placez pas tout le dossier dans le répertoire css. Chaque type de fichier doit aller dans son répertoire, donc les fichiers .scss sous le répertoire sass, les fichiers de polices (.ttf, .woff, etc.) sous le répertoire css/fonts.

C'est important dans Sass à cause de la façon dont fonctionne @import. Dans le Référence Sass dit

Sass recherche d'autres fichiers Sass dans le répertoire actuel et le répertoire de fichiers Sass sous Rack, Rails ou Merb. Des répertoires de recherche supplémentaires peuvent être spécifiés à l'aide de l'option: load_paths ou de l'option --load-path sur la ligne de commande.

J'ai oublié cela et ai placé mes fichiers .scss dans un autre répertoire. C'est pourquoi, avec un @import normal, ils sont introuvables. Ce qui nous amène au point suivant.

3) C’était idiot d’essayer d’importer un fichier .scss en tant qu’URL (), j’ai essayé de le faire car un @import normal ne fonctionnait pas. Une fois que le fichier font-awesome.scss était dans mon répertoire sass, je pouvais maintenant @import "font-awesome/font-awesome.scss" 

4) Idem ici, les chemins @import sont relatifs aux fichiers .scss et tant que font-awesome.scss et ses partiels se trouvent dans le même dossier, inutile de les toucher.

5) C’était vrai, vous devez changer le @FontAwesomePath pour qu’il corresponde à votre répertoire de polices.

6) Bien sûr, vous avez besoin d'un exemple HTML pour les tests, alors ok ici

7) C'était inutile, c'est déjà dans le font-awesome.scss que je suis en train d'importer. SEC.

8) Comme ci-dessus, inutile aussi.

9 & 10) Oui fille, bon travail


Alors, que faut-il apprendre de ceci: vérifiez deux fois vos chemins en tenant compte de la façon dont @import dans Sass ne regarde (par défaut) que votre répertoire sass actuel. 

39
ithil

Cela fonctionne pour moi:

  1. Exécutez la commande:

    npm install font-awesome --save-dev

  2. Ajoutez ces lignes à index.scss:

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

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 que vous liez tous les fichiers. En installant SASS Ruby Gem, vous évitez tout 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";
  }
}
4
Ekaterina Zdorov

Les étapes pour installer une police personnalisée font-awesome sass.

  1. Téléchargez le dossier font-awesome et extrayez-le.

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

  3. Déplacez le dossier polices situé dans le dossier font-awesome vers votre dossier de projets >> Projet/polices

  4. ouvrez le fichier _varaible.scss et changez le chemin comme

$ fa-font-path: "../fonts"! default; {Votre chemin relatif pour les polices dans ce cas est ../../fonts}

  1. Liez le fichier font-awesome.css à votre fichier d’en-tête.

Maintenant, vous êtes tous ensemble

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

1
Wasim Khan

avoir une police géniale

yarn add font-awesome ou

bower install font-awesome (non recommandé)

allez maintenant dans le répertoire font-awesome et copiez le dossier des polices .__ et collez-le un dossier en haut le dossier css ou le dossier scss. Par exemple:

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

Terminé! 

Une autre méthode si vous ne souhaitez pas copier le dossier des polices 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";

1
abe312