Шрифт Awesome & Unicode

Я використовую (чудовий) шрифт-Awesome на своєму сайті, і це добре працює, якщо я використовую це таким чином:


Але (з деяких причин) я хочу використовувати його в Unicode, наприклад:


( cheatsheet шрифту Awesome )

Але це не спрацьовує - замість цього браузер показує квадрат.

Як це вирішити? Шлях CSS правильний (як перший спосіб використання Font Awesome).

Редагувати: у мене встановлено FontAwesome.otf.

31
Будь-ласка, опублікуйте jsfiddle: jsfiddle.net
додано Автор Mohammad Areeb Siddiqui, джерело
спробуйте встановити це: <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /> на вашій сторінці.
додано Автор Mohammad Areeb Siddiqui, джерело
перевірити мою відповідь!
додано Автор Mohammad Areeb Siddiqui, джерело
Я не маю доступу до всіх файлів зараз, я просто хочу знати, як використовувати веб-шрифт за допомогою Unicode.
додано Автор matan129, джерело
це не допомагає
додано Автор matan129, джерело

9 Відповіді

It does not work, because simply asks the browser to display the Private Use code point U+F015 using an italic typeface. The Font Awesome CSS code has nothing that would affect this. If you add class=icon-home to the tag, you will get the glyph assigned to U+F015 in the FontAwesome font, but you will get it twice, due to the way the Font Awesome trickery works.

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


Крім того, використовуйте CSS-код, який вказує елемент i коду font-family: FontAwesome і font-style: normal .

PS. Note that Private Use code points such as U+F015 have, by definition, no interoperable meaning. Consequently, when style sheets are disabled, will not be displayed as any character; the browser will use its way of communicating the presence of undefined data, such as a small box, possibly containing the code point number.

33
додано
+1 Чи використовує Unicode вплив вистави? Я відчуваю, як це могло б, оскільки йому не потрібно було б використовувати псевдо-елемент: до і визначити вміст.
додано Автор Ced, джерело
+1 для PS Вся ідея символьних шрифтів, як FontAwesome, на мій погляд, чужорядна до наміченого дизайну Unicode і Web, і взагалі шкідливо.
додано Автор bobince, джерело
З FontAwesome 5 я виявив, що font-family: FontAwesome; більше не працює. Мені довелося замість цього використовувати font-family: Font Awesome \ 5 Free; .
додано Автор Tom Warner, джерело
@TomWarner коментар дуже корисний. це правильний спосіб встановлення font-family . примітка - може також знадобитися встановити значення font-weight на щось інше, ніж звичайне. у моєму випадку я мав намір сміливо виділити цю піктограму.
додано Автор aberkow, джерело

Ви повинні використовувати клас fa :




26
додано

Для тих, хто може наткнутися на цей пост, вам потрібно встановити

font-family: FontAwesome; 

як властивість у вашому селекторі CSS, а потім юнікод буде добре працювати в CSS

15
додано
Це те, що я повинен був зробити для його роботи
додано Автор Osvaldo Maria, джерело

Після прочитання відповіді davidhund на цій сторінці я Вирішив рішення про те, що ваш веб-шрифт не завантажений належним чином, щоб мене було проблемою неправильних шляхів.

Ось що він сказав:

Перша гадаю, що ви включили FontAwesome webfont з a   інший (під-) домен. Тому переконайтеся, що ви встановили правильні заголовки   ці webfont-файли: "вам потрібно буде додати."   Дозвол-Контроль-Дозволити-Origin заголовок, білий список для вашого домену   витягування активу ".    https://github.com/h5bp/html5boilerplate. ru/blob/master/src/.htaccess # L78-86

Також див. шрифт-готч :)

Сподіваюся, я зрозуміла і допомогла тобі :)

На тій же сторінці f135ta </​​em> сказано:

... Я виправив проблему, завантаживши файл "fontawesome-webfont.ttf"   на моєму веб-сервері та встановлюючи його як звичайний шрифт .. Я не знаю, якщо   його частина попереднього застосування для використання в будь-якому випадку, але це працює для мене; -

1
додано
то як щодо шляхів? вони правильні? Подвійна перевірка їх!
додано Автор Mohammad Areeb Siddiqui, джерело
а як ти .htaccess? ви можете помістити його в свої локальні довідники, але вам потрібно використовувати локальний сервер, такий як WAMP або XAMPP
додано Автор Mohammad Areeb Siddiqui, джерело
Я перевірив це, це може зайняти деякий час. Дякую за допомогу!
додано Автор matan129, джерело
Вони повинні бути правильними, тому що коли я використовую шрифт таким чином, ' "він працює
додано Автор matan129, джерело
не може бути, тому що мій сайт залишається локальним, просто якийсь html. Мені навіть не потрібно використовувати WAMP/XAMPP, щоб перевірити його. І шрифт IS встановлений локально
додано Автор matan129, джерело

You can also use the FontAwesome icon with the CSS3 pseudo selector as shown below. enter image description here

Переконайтеся, що встановлено сімейство шрифтів у FontAwesome, як показано нижче:

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

Щоб отримати вищевказану роботу, потрібно виконати наступне:

  1. Download the FontAwesome CSS library here FontAwesome v4.7.0
  2. Extract from the zip file and include into your app root folder, the two folders as shown below: enter image description here
  3. Reference only the CSS folder in the <head></head> section of your app as shown below: enter image description here
1
додано
Будь-ласка, не використовуйте скріншоти для CSS-коду
додано Автор rekire, джерело

Я виявив, що це спрацювало

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

Це, здається, не працює без "важливого для мене".

Here's a tutorial on how to change social icons with Unicodes https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be

1
додано

Я виявив, що в Font-Awesome версії 5 (безкоштовно) ви додаєте: " Сімейство шрифтів: Шрифт Awesome \ 5 Безкоштовно; " лише тоді, здається, він працює належним чином.

Це працювало для мене :)

Я сподіваюсь, хтось вважає це корисним

1
додано
Дякую! Я перевірив шрифт Awesome CSS, і це, як видається, є відповіддю, але є декілька варіантів (залежно від того, чи було придбано про-ліцензію). Це дозволило мені таємницю.
додано Автор TomJ, джерело

Just to add on Jukka K. Korpela answer above, font awesome already defined a CSS selector "fa". You can simply do . The catch here is, fa defines the font-style:normal, if you need italic, you can override like

0
додано

Я отримав проблему одночасного використання Unicode і fontawesome. коли я писав:

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

На Google Chrome з'являється квадрат замість піктограми. Нова версія Font Awesome також вимагає

font-weight: 900;

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

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

Сподіваюся, це допоможе.

0
додано