Mit FontAwesome mit Sass

Ok, ich bekam Hilfe, es gab einige Probleme mit den Pfaden, waren das Hauptproblem. Ich erkläre Ihnen hier, falls es hilft jemanden in meiner position.

Das problem war: ja, die schriftart-Dateien wurden nicht geladen

Der Fehler: hauptsächlich im Wege und wie Kompass & sass Verhalten mit @import

Die Korrekturen zu meinem oben genannten Schritte:

1) Sie können nicht falsch...

2) Erste, nicht der ganze Ordner in das css-Verzeichnis. Jede Art von Datei gehen sollte in seinem Verzeichnis, also .scss-Dateien unter dem sass-Verzeichnis, die schriftart-Dateien (.ttf, .woff, etc) unter css/fonts Verzeichnis.

Das ist wichtig, Sass da der Weg @import funktioniert. In der Sass-Referenz sagt

Sass sucht nach anderen Sass Dateien im aktuellen Verzeichnis, und die Sass-Datei-Verzeichnis unter Rack, Rails, Merb oder. Zusätzliche search-Verzeichnisse können angegeben werden, indem :load_paths option, oder --load-path " - option auf der Kommandozeile.

Habe ich übersehen, dass und meine .scss-Dateien in anderes Verzeichnis, und das ist, warum mit einem normalen @import Sie konnte nicht gefunden werden. Das führt uns zum nächsten Punkt.

3) Es war dumm zu versuchen, Sie zu importieren .scss-Datei mit einem url(), habe ich versucht, so zu tun, weil eine regelmäßige @import war nicht arbeiten. Sobald der font-awesome.scss-Datei war in meinem sass-Verzeichnis, ich könnte jetzt @import "font-awesome/font-awesome.scss"

4) hier gilt das Gleiche, @import Pfade sind relativ zum .scss-Dateien und so lange wie font-awesome.scss und seine Teiltöne sind im gleichen Ordner, keine Notwendigkeit, berühren Sie diese.

5) Das richtig war, müssen Sie ändern die @FontAwesomePath entsprechend Ihrer Schriften-Verzeichnis

6) Sicher brauchen Sie ein HTML-Beispiel für die Prüfung, so ok hier

7) Das war unnötig, es ist bereits in der font-awesome.scss ich bin importieren. TROCKEN.

8) Dasselbe wie oben, unnötig auch.

9 & 10) Ja, Mädchen, gut gemacht

Also, was ist zu lernen aus diesem: überprüfen Sie Ihre Wege zweimal Berücksichtigung, wie die mit @import in Sass sieht nur (standardmäßig) auf Ihre aktuelle sass-Verzeichnis.

InformationsquelleAutor ithil

Diese Methode arbeitet, aber Sie haben zum download der gesamten fontawesome-Ordner jedes mal, wenn Sie setup ein neues Projekt und verknüpfen Sie alle Dateien. Durch die Installation von SASS Ruby-Gem können Sie vermeiden zusätzliche Arbeit.

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

InformationsquelleAutor Ekaterina Zdorov

bekommen font-awesome durch

yarn add font-awesome
oder

bower install font-awesome (nicht empfohlen)

gehen Sie nun auf die font-awesome-Verzeichnis und kopieren Sie die Schriftarten-Ordner
und fügen Sie es ein Verzeichnis css-Ordner oder scss Ordner.
Eg:

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


Getan!

Einer anderen Methode, wenn Sie nicht wollen, kopieren Sie die Schriftarten-Ordner ist, fügen Sie die folgenden Zeilen in Ihre main.scss Datei:

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

InformationsquelleAutor abe312