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

Ответ 1

Хорошо, я получил помощь в этом, и было несколько проблем с путями, которые были основной проблемой. Я объясню их здесь, если это поможет кому-то в моем положении.

Проблема заключалась в том, что файлы шрифтов не загружались

Ошибки:, в основном связанные с путями, и как компас и sass ведут себя с @import

Поправки к моим шагам выше:

1) Вы не можете ошибиться в этом...

2) Во-первых, не помещайте всю папку в каталог css. Каждый тип файла должен находиться в его каталоге, поэтому файлы .scss в каталоге sass, файлы шрифтов (.ttf,.woff и т.д.) В каталоге css/fonts.

Это важно в Sass из-за способа @import. В Sass Reference говорится

Sass ищет другие файлы Sass в текущем каталоге и каталог файлов Sass в Rack, Rails или Merb. Дополнительные каталоги поиска могут быть указаны с использованием опции: load_paths или опции -load-path в командной строке.

Я пропустил это и поместил свои .scss файлы в другой каталог, и поэтому с обычным @import их не удалось найти. Это приводит нас к следующему пункту.

3) Было глупо пытаться импортировать файл .scss в качестве url(), я пытался это сделать, потому что обычный @import не работал. Как только файл font-awesome.scss находился в моем каталоге sass, теперь я мог @import "font-awesome/font-awesome.scss"

4) То же самое, пути @import относятся к файлам .scss и до тех пор, пока font-awesome.scss и его частичные файлы находятся в одной папке, не нужно касаться этих.

5) Правильно, вам нужно изменить @FontAwesomePath в соответствии с вашим файловым каталогом

6) Конечно, вам нужен пример HTML для тестирования, так что ОК здесь

7) Это было необязательно, это уже в font-awesome.scss, который я импортирую. DRY.

8) То же, что и выше, тоже не нужно.

9 и 10) Да, девочка, хорошая работа

Итак, что узнать из этого: дважды проверьте свои пути, учитывая, как @import в Sass только выглядит (по умолчанию) в вашем текущем каталоге sass.

Ответ 2

Этот метод работает, но вы должны загружать всю папку шрифтов каждый раз, когда вы настраиваете новый проект и связываете все файлы. Установив 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";
  }
}

Ответ 3

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

• Запустите команду:

  npm install font-awesome --save-dev
  

• Добавьте эти строки в index.scss:

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

Ответ 4

Шаги по установке настраиваемого шрифта-awesome sass.

• Загрузите папку с удивительным шрифтом и извлеките ее.

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

• Переместите папку шрифтов, находящуюся внутри папки, содержащей шрифт, в папку ваших проектов → Project/fonts

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

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

4. Свяжите шрифт-awesome.css с файлом заголовка.

Теперь вы все установлены

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