Почему не отображаются иконки FontAwesome?

Question

[Антон]

Здравствуйте!

Вместо иконки отображается только квадрат:


В сгенерированном виде:

@font-face {
	font-family: 'FontAwesome';
	src: url("/fonts/font-awesome/fontawesome-webfont.eot");
	src: url("/fonts/font-awesome/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/font-awesome/fontawesome-webfont.woff2") format("woff2"), url("/fonts/font-awesome/fontawesome-webfont.woff") format("woff"), url("/fonts/font-awesome/fontawesome-webfont.ttf") format("truetype"), url("/fonts/font-awesome/fontawesome-webfont.svg#fontawesomeregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

Выше от bootstrap:

@font-face {
	font-family: 'Glyphicons Halflings';
	src: url("/fonts/bootstrap/glyphicons-halflings-regular.eot");
	src: url("/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

Иконки bootstrap отображаются, а FontAwesome нет.

В каталоге /app/assets/fonts они есть:


В чем может быть проблема?

Comments

[Alexey ZloDeeV]

В консоли что выводится? Подгружаются вообще шрифты или нет? Если нет - структура папок.

Answer 1

[Viktor Vsk]

Врядли Ассет Пайплайн сам подхватит директорию fotns
Добавляйте fonts директорию в public

Comments

[Антон]

Странно. А почему тогда bootstpap подхватывает?

[Viktor Vsk]

Антон: гем бутстрап, вы имеете ввиду? Наверное, потому что они там в геме жестко задали зависимости

[Антон]

Хоть и public помог, но меня что-то мучает это решение. Не комфортно. Просто недавно начал изучать Rails и пока держу позицию, мол все (стили, и скрипты шаблонов) должно быть в app. Или я не прав?

[Viktor Vsk]

Антон: в app должны быть ассеты (активы) - вещи, которые часто изменяются Вами. В папке vendor/assets предполагается что будут лежать сторонние библиотеки (уже добавлено в автозагрузку, вроде как). А в паблик предполагается, что будет лежать то, что не изменяется (вообще, что б кеш на них не влиял) - шриты хорошие кандидаты.

[Антон]

Виктор Ablebeam: хорошо. Спасибо за объяснение и за помощь. Проблема решена.

Answer 2

[hax0r :3]

Значит вы не правильно указываете путь! попробуйте сделать так ко всем:

src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");

Comments

[Загир Меджидов]

это работает только сайты у которых движок Flask и тд

Answer 3

[Даулет Ногайбек]

Шрифт подключать совсем не обязательно. Сейчас достаточно подключить css-файл.

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
 
<i class="fa fa-bomb fa-5x"></i>

Этого достаточно и будет работать

Answer 4

[vsuhachev]

тут