Font Awesome & Unicode

я использую (отличный) Font-Awesome на моем сайте, и этоработает нормально, если я использую это так:


Но (по некоторым причинам) я хочу использовать его в Unicode, например :(

Font Awesome 'Шпаргалка)

Но это нене работает - браузер показывает квадрат вместо.

Как мне это решить? Путь CSS правильный (как работает первый способ использования Font Awesome).

Изменить: у меня установлен FontAwesome.otf.

 matan12922 июн. 2013 г., 21:23
это нет помощь
 Mohammad Areeb Siddiqui22 июн. 2013 г., 21:20
попробуйте установить это: на твоей странице.
 Mohammad Areeb Siddiqui22 июн. 2013 г., 21:11
пожалуйста, отправьте jsfiddle: jsfiddle.net
 Mohammad Areeb Siddiqui22 июн. 2013 г., 21:23
зацени мой ответ!
 matan12922 июн. 2013 г., 21:15
Я неТеперь у меня нет доступа ко всем файлам, я просто хочу знать, как использовать веб-шрифт с Unicode.

Ответы на вопрос(10)

кто может наткнуться на этот пост, вам необходимо установить

font-family: FontAwesome; 

в качестве свойства в вашем селекторе CSS, а затем Unicode будет хорошо работать в CSS

 Sølve Tornøe21 сент. 2018 г., 12:36
В моем случае мне пришлось изменить это наfont-family: Font Awesome 5 Pro;
 Osvaldo Maria30 апр. 2018 г., 18:13
Это то, что я должен был сделать, чтобы это работало
 Miloslav Milo Janoušek31 мая 2019 г., 16:13
Да, это для версии 4.7.

Обязательно загрузите стиль FontAwesome перед вашим.

font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f007";

Вы можете найти FontAwesome 'Объяснения здесь:https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Я обнаружил, что это сработало

content: "\f2d7" !important;
font-family: FontAwesome !important;

Это некажется, работает без! важно для меня.

Вот'Учебник о том, как изменить социальные иконки с Unicodeshttps://www.youtube.com/watch?v=-jgDs2agkE0&Функция = youtu.be

esome. когда я написал:

font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */

В Google Chrome вместо значка отображается квадрат. Новая версия Font Awesome также требует

font-weight: 900;

Тот'работа для меня.

От :https://github.com/FortAwesome/Font-Awesome/issues/11946

Надеюсь что'с поможет.

 etech19 сент. 2018 г., 20:21
Да, вес шрифта требуется сейчас. Благодарю.
 cbloss79330 янв. 2019 г., 23:17
Это спасло меня. Мне не хватало веса шрифта. Спасибо, Базиль!

чтобы добавить ответ Юкки К. Корпела выше, шрифт потрясающий, уже определен селектор CSS "фа», Вы можете просто сделать , Уловка здесь в том, что fa определяет стиль шрифта: нормальный, если вам нужен курсив, вы можете переопределить как

S3, как показано ниже.

Убедитесь, что для font-family установлено значение FontAwesome, как показано ниже:

table.dataTable thead th.sorting:after {font-family: FontAwesome;}

Чтобы вышеперечисленное сработало, вы должны сделать следующее:

Загрузите библиотеку FontAwesome css здесьFontAwesome v4.7.0Извлеките из zip-файла и включите в корневую папку вашего приложения две папки, как показано ниже:Ссылка только на папку css в раздел вашего приложения, как показано ниже:
 rekire29 июл. 2018 г., 20:21
Пожалуйста, не'использовать скриншоты для CSS кода
 georgeawg03 мая 2019 г., 22:27
Изображения кода не помогают. Они могут'быть скопированным / вставленным.

davidhund наэта страница Я пришел к решению, что ваш веб-шрифт неЯ загружен правильно, что у меня проблема с неправильными путями.

Вот что он сказал:

Мое первое предположение заключается в том, что вы включили веб-шрифт FontAwesome из другого (суб) домена. Поэтому убедитесь, что вы установили правильные заголовки для этих файлов webfont: "вы'Вам нужно будет добавить заголовок Access-Control-Allow-Origin, добавив белый доменвытащить актив из. " https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

А также посмотрите нашрифт-подводные камни :)

Надеюсь, я ясно и помог вам :)

На той же странице,f135ta сказал:

... я исправил проблему, загрузив файл "fontawesome-webfont.ttf» на мой веб-сервер и установить его как обычный шрифт .. Я не знаю, является ли он частью предварительного запроса 's для того, чтобы использовать это так или иначе, но это работает для меня; -

 Mohammad Areeb Siddiqui22 июн. 2013 г., 21:36
как насчет тебя .htaccess? вы также можете поместить его в свои локальные каталоги, но вам нужно использовать локальный сервер, такой как WAMP или XAMPPI '
 Mohammad Areeb Siddiqui22 июн. 2013 г., 21:31
тогда как насчет путей? они правы?двойная проверка их!
 matan12922 июн. 2013 г., 21:37
Я проверю это, это может занять некоторое время. Спасибо за помощь!
 matan12922 июн. 2013 г., 21:28
Можно'потому что мой сайт все еще локальный, просто какой-то html. Я недаже нужно использовать WAMP / XAMPP, чтобы проверить это. И шрифт установлен локально
 matan12922 июн. 2013 г., 21:34
Они должны быть правильными, потому что, когда я использую шрифт таким образом '<я класс = "значок-дом "> </ Я>»  оно работает
Решение Вопроса

 просто просит браузер отобразить кодовую точку частного использования U + F015 с использованием курсивного шрифта. Код Font Awesome CSS не имеет ничего, что могло бы повлиять на это. Если вы добавитеclass=icon-home к тегу вы получите глиф, назначенный U + F015 в шрифте FontAwesome, но вы получите его дважды, благодаря тому, как работает хитрость Font Awesome.

Чтобы получить глиф только один раз, вам нужно использовать CSS, который запрашивает использование шрифта FontAwesome, не вызывая правила, которые добавляют глиф через сгенерированный контент. Простой трюк - использовать имя класса, которое начинается сicon- но не соответствует ни одному из предопределенных имен в Font Awesome или любому имени, используемому в вашем коде CSS или JavaScript. Например.,

<i class="icon-foo"></i>

В качестве альтернативы используйте код CSS, который устанавливаетfont-family: FontAwesome а такжеfont-style: normal наi элемент.

PS. Обратите внимание, что кодовые точки частного использования, такие как U + F015, по определению не имеют значения для взаимодействия. Следовательно, когда таблицы стилей отключены, не будет отображаться как любой символ; браузер будет использовать свой способ сообщения о наличии неопределенных данных, таких как небольшая коробка, возможно, содержащая номер кодовой точки.

 Tom Warner12 дек. 2017 г., 01:11
С FontAwesome 5 я обнаружил, чтоfont-family: FontAwesome; больше не работает. Я должен был использоватьfont-family: Font Awesome\ 5 Free; вместо.
 bobince23 июн. 2013 г., 14:59
+1 за PS. Вся идея символьных шрифтов, таких как FontAwesome, на мой взгляд, чужды предполагаемому дизайну Unicode и Интернета и вообще вредна.
 aberkow11 апр. 2018 г., 21:40
@TomWarner»Комментарий очень полезен. тот'это правильный способ установкиfont-family, примечание - может также потребоваться установитьfont-weight к чему-то другому, чем обычно. в моем случае мне нужно было установить его жирным шрифтом, чтобы иконка появилась.
 Ced25 нояб. 2015 г., 03:27
+1. Влияет ли использование юникода на производительность? Я чувствую, что это могло бы, так как это неНеобходимо использовать псевдоэлемент: before и определить содержимое.

Вы должны использоватьfa учебный класс:

<i class="fa">
   
</i>

<i class="fa fa-2x">
   
</i>

font-family: Font Awesome \ 5 Free; " только тогда, кажется, работает правильно.

Это сработало для меня :)

Я надеюсь, что некоторые находят это полезным

 TomJ25 авг. 2018 г., 00:59
Спасибо! Я проверил Font Awesome CSS, и это, кажется, ответ, но тамНесколько вариантов (в зависимости от того, была ли куплена профессиональная лицензия). Это решило для меня загадку.
 O.S.Kaya09 окт. 2018 г., 20:19
Спасибо чувак! Это была проблема!

Ваш ответ на вопрос