Utilisation de FontAwesome avec Sass

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

La sortie

Je ne reçois aucune erreur spécifique, soit introuvable ou des erreurs de compilation. Il ne montre tout simplement rien, pas d'icône ou de texte. Les fichiers de polices FontAwesome ne semblent pas être en cours de chargement.

Les étapes que j'ai fait

  1. Téléchargez 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 changez le @FontAwesomePath de celui par défaut à "font-awesome/font/", pour correspondre à l'endroit où le les webfonts sont
  6. dans mon fichier html, j'ai ajouté un exemple suivant celui de la page FontAwesome examples , j'ai donc ajouté un <i class="icon-camera-retro"></i> Some text
  7. Dans mon fichier SASS principal, a ajouté la déclaration @ font-face

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

    %icône-police { famille de polices: 'FontAwesome', Helvetica, Arial, sans-serif; }

  8. Étendre la police dans le sélecteur

    .icône-caméra-rétro { @étendre %de l'icône de la police; }

  9. Compiler ma feuille de style Sass principale en utilisant compass --watch sans erreurs

  10. Tout Téléchargé


Pour aider à 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?

22
demandé sur ithil 2013-09-02 13:59:08

5 réponses

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 vais les expliquer ici au cas où cela aiderait quelqu'un dans ma position.

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

Les erreurs: principalement liées aux chemins et comment compass & sass se comportent avec @import

Les corrections à mon étapes ci-dessus:

1) vous ne pouvez pas faire de mal sur celui-ci...

2) D'abord, ne mettez pas l'ensemble dossier dans le répertoire css. Chaque type de fichier doit aller dans son répertoire, pour le .fichiers scss sous le répertoire sass, les fichiers de police (.ttf, .woff, etc) dans le répertoire CSS / fonts.

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

Sass recherche d'autres fichiers Sass dans le répertoire courant 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 l'option -- Load-path sur la ligne de commande.

J'ai négligé cela et placer mon .les fichiers scss dans un autre répertoire et c'est pourquoi avec un @import normal, ils n'ont pas pu être trouvés. Ce qui nous amène au point suivant.

3) Il était stupide d'essayer d'importer un .fichier scss en tant qu'url (), j'ai essayé de le faire car un @import régulier ne fonctionnait pas. Une fois la font-awesome.le fichier scss était dans mon répertoire sass, je pourrais maintenant @import "font-awesome/font-awesome.scss"

4) Même ici, @import chemins sont relatifs à l' .scss fichiers et aussi longtemps que la police-génial.scss et ses partiels sont dans le même dossier, pas besoin de les toucher.

5) c'était vrai, vous devez changer le @FontAwesomePath pour correspondre à 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 la police-génial.scss je suis de l'importation. SEC.

8) même que ci-dessus, inutile aussi.

9 & 10) Ouais fille, bon travail


alors, ce qu'il faut apprendre de cela : vérifiez vos chemins deux fois en tenant compte de la façon dont @import in Sass ne regarde (par défaut) que dans votre répertoire Sass actuel.

39
répondu ithil 2013-09-02 13:35:16

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";
    
18
répondu uri gat 2017-10-24 13:17:31

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";
  }
}
4
répondu Ekaterina Zdorov 2017-02-23 15:56:04

É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/

1
répondu Wasim Khan 2015-11-02 07:47:32

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

1
répondu abe312 2018-03-07 16:36:55