3

Я только что начал использовать Font Awesome в моем приложении MVC, у которого уже есть Bootstrap. Мне нужно использовать некоторые значки, и я скопировал font-awesome.css в свой проект, но значки не видны. Я включил только этот css, не уверен, но хочу спросить, есть ли еще некоторые файлы для включения?cant display Font awesome icons?

Вот как это видно на моей странице: enter image description here

В только что проверил в Firebug и его отображение в CSS панели, как показано ниже: enter image description here

Пожалуйста, руководство, как я могу это исправить.

Спасибо за вашу помощь и руководство

+1

вам нужно включить весь каталог, или лучший способ - ссылка на внешний css, который находится на сервере fontawesome. – Zafar

+0

@ Zafar, вы имеете в виду включать всю директорию и ссылаться только на файл css? Требуется ли какая-либо другая конфигурация? – Toubi

+1

да. включают все каталоги и ссылаются только на 'font-awesome.css'. никаких других настроек. – Zafar

ответ

6

Вы должны иметь шрифты каталог доступных и могут быть доступны в вашем веб-сервере. Он включен в пакет загрузки из http://fortawesome.github.io/Font-Awesome/

Внутри шрифта awesome.css, он должен обратиться к шрифтов каталогов для того, чтобы отобразить изображение значка.

Надеюсь, это поможет.

+0

спасибо, пожалуйста, подскажите, что для менее и scss? Нужно ли исключать или включать какие-либо файлы, особенно в производственной среде? – Toubi

+0

Если вы используете только css, вам не нужны меньше и scss-каталоги.Эти каталоги предназначены для тех, кто хочет использовать Less и Sass, которые являются предварительным процессором CSS и расширением CSS соответственно. – rasyadi

+0

@rasyadi, можете ли вы исправить эту ссылку? Кажется, это 404. Мы хотим удостовериться, что ответы, которые мы публикуем, полезны в будущем. Благодаря! – imjared

3

Кроме того, я заметил, что мне нужно передать ссылку на папку в «font-awesome.css», где можно найти каталог, если вы создали его для хранения всех шрифтовых файлов. Вы можете проверить, что, чтобы убедиться, что его ищет в правильном месте, а также убедитесь, что у вас есть ссылки с «пучками» в App_Start и Shared/_Layout.cshtml

@font-face { 
     font-family: 'FontAwesome';`enter code here` 
     src: url('../Content/fonts/fontawesome-webfont.eot?v=4.2.0'); 
     src: url('../Content/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../Content/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../Content/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../Content/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); 
     font-weight: normal; 
     font-style: normal; 

    } 
0

Любой все еще ищет альтернативный ответ, это метод, предложенный другим StackOverflow answer, решает проблему.

В основном изменить действие «Сборка» на .eot, .ttf, & .Woff-файлы на «Содержимое» вместо значения по умолчанию «Нет». Выполнение этого разрешило мою проблему.