Использование FontAwesome с Sass

эта работа для меня:

1. выполнить команду:

   npm install font-awesome --save-dev
   

2. добавить эти строки в индекс.scss:

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

этот метод работает, но вы должны загружать всю папку fontawesome каждый раз, когда вы устанавливаете новый проект и связываете все файлы. Установив Sass Ruby Gem, вы можете избежать дополнительной работы.

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

шаги по установке пользовательского шрифта-awesome sass.

1. загрузите папку font-awesome и извлеките ее.

2. откройте извлеченную папку > > font-awesome / scss, там вы найдете шрифт-awesome.scss и шрифт-удивительные частичные файлы. переместите все эти файлы в папку scss вашего проекта.

3. переместите папку шрифтов, которая находится внутри font-awesome папку в папку проектов >> Проект / шрифты

4. откройте _varaible.scss и измените путь как

$fa-font-path:"../шрифты" !по умолчанию; {ваш относительный путь для шрифтов в этом случае ../../шрифты}

1. связать шрифт-удивительный.css в файл заголовка.

теперь все готово

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

получить шрифт-удивительный по

yarn add font-awesome или

bower install font-awesome (Не рекомендуется)

Теперь перейдите в каталог font-awesome и скопируйте папку fonts и вставить его одна папка вверх папка css или папка scss. Например:

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

готово!

другой метод, если вы не хотите копировать папку шрифтов, чтобы добавить следующие строки в вашем :

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