FontAwesome значки, которые не отображаются на веб-странице

У меня есть дизайн веб-сайта в формате HTML и используется значок FontAwesome. Когда я запускаю веб-сайт на localhost, значок отображается отлично. Но по URL-адресу это не работает. Здесь URL: Demo FontAwesome значки, которые не отображаются на веб-странице

вот мой заказ CSS:

@font-face{ 
     font-family:'FontAwesome'; 
     src:url('../font/[email protected]=3.2.1'); 
     src:url('../font/[email protected]#iefix&v=3.2.1') 
     format('embedded-opentype'),url('../font/[email protected]=3.2.1') 
     format('woff'),url('../font/[email protected]=3.2.1') 
     format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
     format('svg');font-weight:normal;font-style:normal; 
}

[class^="icon-"], [class*=" icon-"] { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: inherit; 
    -webkit-font-smoothing: antialiased; 
}

.icon-envelope-alt:before{content:"\f003";} 
.icon-heart:before{content:"\f004";} 
.icon-star:before{content:"\f005";} 
.icon-star-empty:before{content:"\f006";} 
.icon-user:before{content:"\f007";} 
.icon-film:before{content:"\f008";} 
.icon-th-large:before{content:"\f009";} 
.icon-th:before{content:"\f00a";} 
.icon-th-list:before{content:"\f00b";} 
.icon-ok:before{content:"\f00c";} 
.icon-remove:before{content:"\f00d";} 
.icon-zoom-in:before{content:"\f00e";} 
.icon-zoom-out:before{content:"\f010";} 
.icon-power-off:before,.icon-off:before{content:"\f011";} 
.icon-signal:before{content:"\f012";}

кто поможет мне исправить это.

Спасибо.

источник

2015-12-10 Jargo Viet

Вопросы, ищущих код помощи должны включать короткий код, необходимый для воспроизведения это ** в самом вопросе **. Хотя вы указали ссылку на пример, если ссылка стала недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с той же проблемой. –

Ваша проблема в том, что сервер не может найти файлы в указанном вами местоположении.

Если вы проверяете страницу, вы увидите эти ошибки в консоли:

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://qubedns.co.in/codes/design/hotelsr/font/[email protected]=3.2.1 Failed to load resource: the server responded with a status of 404 (Not Found) 
http://qubedns.co.in/codes/design/hotelsr/font/[email protected]=3.2.1 Failed to load resource: the server responded with a status of 404 (Not Found)

Вам нужно изменить путь, так что может быть загружен правильно грозные файлы шрифтов.

источник

2015-12-10 12:04:28 Edd

Но он отлично работает на localhost @ Edd –

Ну, ваши файлы woff, ttf и т. Д. Сохранены в/codes/design/hotelsr/font /? – Edd

Да, я добавил эти файлы, любезно проверяя через Resouce в Inspecting Element (Google Chrome) –

Вы должны включить таблицу стилей из FontAwesome внутри головы тега

<head> 
    ... 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    ...

Затем вы используете в меню:

<span class="icon-angle-down" style="color: rgb(51, 51, 51);"></span>

Правильная версия:

<i class="fa fa-angle-down" style="color: rgb(51, 51, 51);"></span>

источник

2015-12-10 12:08:56 pedrodj46

У меня есть пользовательский элемент css i.e, который раньше, поэтому я использую такой диапазон: –

А, ну, я не знаю этого. Итак, проблема в том, что файлы не находятся в правильном положении на сервере – pedrodj46

Мы не могут найти шрифт на пути: http://qubedns.co.in/codes/design/font/[email protected]=3.2.1

Этот сайт не доступен

DNS_PROBE_FINISHED_NO_INTERNET

Какой путь вы используете на свой код

@font-face{ 
     font-family:'FontAwesome'; 
     src:url('../font/[email protected]=3.2.1'); 
     src:url('../font/[email protected]#iefix&v=3.2.1') 
     format('embedded-opentype'),url('../font/[email protected]=3.2.1') 
     format('woff'),url('../font/[email protected]=3.2.1') 
     format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
     format('svg');font-weight:normal;font-style:normal; 
}

источник

2015-12-10 12:55:03 Elow

FontAwesome значки, которые не отображаются на веб-странице

ответ

Смежные вопросы