font-face и псевдо :before

#1 1 февраля 2015 в 17:38
Что-то запутался немного. Вроде бы пишу все верно, а в итоге получаю иероглифы. Подключаю в стилях:

  1. @font-face {
  2. font-family:'WebSymbolsRegular';
  3. src:url("fonts/websymbols-regular-webfont.eot");
  4. src:url("fonts/websymbols-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/websymbols-regular-webfont.woff") format("woff"), url("fonts/websymbols-regular-webfont.ttf") format("truetype"), url("fonts/websymbols-regular-webfont.svg#WebSymbolsRegular") format("svg");
  5. font-weight:normal;
  6. font-style:normal;
  7. }
  8.  
  9. @font-face {
  10. font-family:'Open Sans';
  11. src:url("fonts/OpenSans-Light.eot");
  12. src:url("fonts/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Light.woff") format("woff"), url("fonts/OpenSans-Light.ttf") format("truetype"), url("fonts/OpenSans-Light.svg#OpenSansBold") format("svg");
  13. font-weight:300;
  14. font-style:normal;
  15. }
  16.  
  17. @font-face {
  18. font-family:'Open Sans';
  19. src:url("fonts/OpenSans-Regular.eot");
  20. src:url("fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Regular.woff") format("woff"), url("fonts/OpenSans-Regular.ttf") format("truetype"), url("fonts/OpenSans-Regular.svg#OpenSansBold") format("svg");
  21. font-weight:normal;
  22. font-style:normal;
  23. }
  24.  
  25. @font-face {
  26. font-family:'Open Sans';
  27. src:url("fonts/OpenSans-Italic.eot");
  28. src:url("fonts/OpenSans-Italic.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Italic.woff") format("woff"), url("fonts/OpenSans-Italic.ttf") format("truetype"), url("fonts/OpenSans-Italic.svg#OpenSansBold") format("svg");
  29. font-weight:normal;
  30. font-style:italic;
  31. }
  32.  
  33. @font-face {
  34. font-family:'Open Sans';
  35. src:url("fonts/OpenSans-Bold.eot");
  36. src:url("fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/OpenSans-Bold.woff") format("woff"), url("fonts/OpenSans-Bold.ttf") format("truetype"), url("fonts/OpenSans-Bold.svg#OpenSansBold") format("svg");
  37. font-weight:bold;
  38. font-style:normal;
  39. }
Так прописываю вебфонт для домика:

  1. .fa-home:before { content: "\f015"; }
Вывод:

  1. <i class="fa fa-home"></i>
В итоге получаю вот такое:



Собственно, что я упустил? scratch
#2 1 февраля 2015 в 17:41
сталкивался с подобным. файл скорее всего "не доступен для чтения".
#3 1 февраля 2015 в 17:43
Не может такого быть в принципе то на локальном виндовс сервере) По крайней мере у меня еще такого не было.
Лежит папка css, в ней папка fonts, потому подключаю вроде бы как все верно. Пути верные, для записи папка доступна и для чтения так же.
Но почему-то не фурычит…
#4 1 февраля 2015 в 17:46
еще как может😊 и именно с иконочными шрифтами на локальном сервере виндовс.
попробуйте переместить файл иконочных шрифтов в корень и посмотрите.
#5 1 февраля 2015 в 17:48
scanread, попробуйте указать пути в урлах от templates, например "/templates/default/fonts/websymbols-regular-webfont.eot"
#6 1 февраля 2015 в 17:49
Одинаково. Оно их подключает и читает, факт, ибо в консоле нет ошибок, что чего-то недоступно или кривой путь. Притом, на чистом хтмл оно работает, а подключил к инстанту на шаблон — не работает.
#7 1 февраля 2015 в 17:52

попробуйте указать пути в урлах от templates

Loadырь
сталкивался с подобной проблемой отображения иконочных шрифтов в html5 плеере (из папки шаблона при любых путях локальный сервер зарубает работу файла шрифтов из-за "отсутствия прав").
P.S. Версия ICMS2.x.x.
#8 1 февраля 2015 в 17:57
Посмотрите в консоле веб инспектора описание проблемы. денвер Вам подскажет :)
#9 1 февраля 2015 в 17:58
scanread, если вам для двойки, откройте файл /templates/.htaccess и строку
  1. <Files ~ "\.(js|css|xml|png|gif|jpg|jpeg|html|htm|ico|bmp|map)$">
Заменить на
  1. <Files ~ "\.(js|css|xml|png|gif|jpg|jpeg|html|htm|ico|bmp|map|eot|woff|ttf|svg)$">
Потом обязательно очистите кэш браузера
#10 1 февраля 2015 в 17:58
Evanescence, увы, для первой ветки, 10.6. Забыл указать вначале.
#11 1 февраля 2015 в 19:34
scanread, ищите проблему в доступности файла шрифтов для чтения из него — это 100%. Evanescence, вам подсказал правильное решение для двойки, однако файл .htaccess есть и в первой ветке, ищите его и вписывайте недостающие расширения файлов шрифтов…
#12 1 февраля 2015 в 20:56
У меня на локалке в двойке также, там просто доступ к шрифтам ограничен, 403 ошибку выдает, Попробуйте открыть шрифт по ссылке из шаблона. Узнаете правильный ли путь или доступ закрыт. Если шрифт подключен он же не будет квадратики показывать.
#13 1 февраля 2015 в 21:02

файл скорее всего "не доступен для чтения".

Soul

ищите проблему в доступности файла шрифтов для чтения из него

Val

на локалке в двойке также, там просто доступ к шрифтам ограничен,

Atid — Gorec
#14 1 февраля 2015 в 21:47
по ссылке доступен и можно скачать. в инспекторе статус 200 ок.
#15 1 февраля 2015 в 23:07
Заело, в общем, поставил систему на хостинг, там работает вроде бы как. НУ и славно) Не охота убивать время на поиски решения на локальном.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.