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

21

Я пытаюсь использовать FontAwesome в веб-проекте Compass. Поскольку на странице FontAwesome нет конкретной документации, и я не использую Bootstrap, у меня есть после "Не используя Bootstrap?" но не может заставить его работать.

Выход

Я не получаю никаких конкретных ошибок, либо не обнаружил, либо не компилировал ошибки. Это просто ничего не показывает, нет значка или текста. Файлы шрифтов FontAwesome, похоже, не загружаются.

Выполненные шаги

  1. Загрузите каталог font-awesome
  2. Скопируйте его в папку css моих проектов, где у меня есть все мои скомпилированные css: project/css/font-awesome
  3. Импортируйте файл font-awesome.scss в мою таблицу стилей sass, как этот @import url("font-awesome/scss/font-awesome.scss");
  4. Откройте файл font-awesome.scss и измените пути импорта, так что теперь это относится к моему скомпилированному файлу css и выглядят как @import url("font-awesome/scss/_variables.scss");
  5. Откройте часть _variables.scss внутри каталога font-awesome / scss и измените @FontAwesomePath от значения по умолчанию до "font-awesome/font/" , чтобы соответствовать тому, где веб-сайты
  6. В моем html-файле добавлен пример следующего в страницы примеров FontAwesome , поэтому я добавил <i class="icon-camera-retro"></i> Some text
  7. В моем основном файле sass добавлена ​​декларация @ font-face

    @include font-face ('FontAwesome', шрифт-файлы ( 'font-awesome / font / fontawesome-webfont.woff', woff, 'font-awesome / font / fontawesome-webfont.ttf', ttf, 'font-awesome / font / fontawesome-webfont.svg', svg), 'Fontawesome / шрифт / fontawesome-webfont.eot');

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

  8. Расширьте шрифт в селекторе

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

  9. Скомпилируйте мою основную таблицу стилей sass, используя compass --watch без ошибок

  10. Загружено все


Чтобы помочь прояснить, это структура моего проекта:

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


Итак, если кто-то прочитал здесь, что я уже ценю, любые идеи, пожалуйста?

    
задан ithil 02.09.2013 в 11:59
источник

5 ответов

38

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

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

Ошибки: , в основном связанные с путями, и как компас & amp; 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 & amp; 10) Да, девочка, хорошая работа


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

ответ дан ithil 02.09.2013 в 15:35
источник
  • Спасибо за решение. Последнее предложение действительно важно. –  Orkun Tuzel 15.01.2014 в 14:50
  • Могу ли я добавить, что вам нужно следить за своим префиксом. Итак, в вашем примере у него есть класс «icon-camera-retro», мне на самом деле пришлось использовать «fa fa-camera-retro». Надеюсь, это поможет любому, кто застрял в последнем пункте! –  Andrew Dover 16.03.2014 в 22:22
  • узел sass использует includePaths, см. этот github.com/sass/node-sass#includepaths –  Mouloud 23.10.2016 в 13:53
  • Для тех, кто ищет руководство от Font Awesome, перейдите по ссылке - fontawesome.com/how-to-use/web-fonts-with-css#less-and-sass –  Chase Oliphant 05.04.2018 в 21:52
14

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

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

    npm install font-awesome --save-dev
    
  2. Добавьте эти строки в index.scss:

    $fa-font-path: "~font-awesome/fonts";
    @import "~font-awesome/scss/font-awesome";
    
ответ дан uri gat 24.10.2017 в 14:38
источник
  • Это сработало для меня, написанное как ~! –  mintedsky 29.11.2017 в 21:23
4

Этот метод работает, но вы должны загружать всю папку шрифтов каждый раз, когда вы настраиваете новый проект и связываете все файлы. Установив 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";
  }
}
    
ответ дан Ekaterina Zdorov 07.09.2014 в 03:50
источник
  • Пожалуйста, включите соответствующие данные из ссылок в самом ответе. Ссылки умирают, к сожалению, и тогда ответ станет бесполезным. –  EWit 07.09.2014 в 03:59
1

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

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

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

  3. Переместите папку шрифтов, находящуюся внутри папки с удивительным шрифтом, в папку ваших проектов & gt; & gt; & gt; Проект / шрифты

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

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

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

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

Ссылка

    
ответ дан Wasim Khan 02.11.2015 в 08:47
источник
1

получить шрифт-awesome

yarn add font-awesome или

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

теперь перейдите в папку с шрифтами и скопируйте папку шрифтов и вставьте его в одну папку вверх папку css или папку scss. Например:

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

Готово!

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

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

ответ дан abe312 07.03.2018 в 17:17
источник