Как понять :before { content: «» }?

Question

[Beliu]

Здравствуйте делаю первый сайт. Помогите пожалуйста. Сделал иконки через

.fa-l:before {
  content: "\f0cb";
}

на компе все хорошо отображается. Залил на хост в нете они отображаются квадратиками. Почему так?

Answer 1

[Максим]

шрифт не установлен
и сервер линуксовый у которого набор шрифтов отличается от тех что на компе были

Comments

[Beliu]

спасибо, а как установить эти шрифты? куда их там установить чет не доходит?

[Максим]

Beliu: оо ! задайте лучше другой вопрос о том как это исправить , я не знаю как это делать

[Anton Bobylev]

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

[Максим]

Anton Bobylev: я лишь сказал что они отсутствуют и что они на его компе были

[Anton Bobylev]

Максим Ленский: это очень ценная информация, но совершенно не имеющая отношения к вопросу. Зачем её давать, пуская человека по ложному следу? Теперь он будет искать как установить шрифты в линуксе)) И это ему в его проблеме никак не поможет.

[Максим]

Anton Bobylev: я потому и не ответил на вопрос "как установить" но решение я на самом деле не знаю , но лишь знаю что из за отсутствия шрифта и всё

[Anton Bobylev]

Максим Ленский: зачем отвечать на вопрос, если не знаешь решения?

[Максим]

Anton Bobylev: вот к примеру , вы знаете ? ответьте , если нет то я хотя бы сказал ему почему это

Answer 2

[Anton Bobylev]

Кодировку документа проверьте.

Если вы с той же системы смотрите - шрифты должны быть не при чем.

Если отображается у вас нормально, а у других - квадратиками - подключите соответсвующий шрифт через css.

Comments

[Максим]

интересно ... а какой шрифт надо установить ?

[Anton Bobylev]

Максим Ленский: тот в котором присутствует данный символ, очевидно же) нужно посмотреть в испекторе, какой фрифт используется в данном месте и подключить его, явно указав соответсвующий файл.

[Максим]

Anton Bobylev: опять нету точного ответа ... у меня (я не автор вопроса) так же это было ... но так и не решил этот вопрос для себя , хотя это и не важно было ... я реализовал через font-awesome с их иконками

[Anton Bobylev]

Максим Ленский: а точного ответа при таких вводных и не будет.
1) Явно определяете какой шрифт используете
2) Подключаете его в css через @font-face
3) Используете коды глиф из этого шрифта
4) Следите за кодировкой документа (должно быть сохранено в UTF8 и сервером отдано в ней же)
...
5) ПРОФИТ!

[Максим]

Anton Bobylev: я то знаю это ... вот как донести до автора ? вот в чём вопрос

[Beliu]

Anton Bobylev: спасибо за разьяснения буду пробавать. Но все равно не понятно почему на компе нормально шрифт этот срабатывает а через хостинг нет

[Beliu]

Anton Bobylev: @font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[Beliu]

Anton Bobylev: вот они в принципе подключены

[Anton Bobylev]

Beliu: Если на той же машине - то помимо кодировки есть еще вариант с локальным путем к файлу шрифта/ отстутствию шрифта по указанному адресу. В любом случае без листинга html и css гадать можно долго.

[Anton Bobylev]

Beliu: а загружены они на сервер эти шрифты? Доступны они по указанному относительному пути? Посмотрите в лог загрузки страницы нет ли там 404х ошибок.

Answer 3

[Beliu]

суть в том что открывая свои страницы которые лежат на компе все норм потом залитые
открываю через свой домен получаются квадраты
кодировка

Comments

[Anton Bobylev]

Вот вы этот код \f0cb откуда взяли? Какой шрифт в этом элементе используете?

[Beliu]

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}