Unicode через CSS: до

81

Я використовую Font Awesome на своїй веб-сторінці, і я хочу відобразити піктограму всередині :beforeпсевдоелемента.

Згідно з документацією / шпаргалкою , я повинен набирати текст, щоб отримати цей шрифт, але він не працює. Я вважаю, що це нормально, оскільки сутності HTML не підтримуються в :before.
Тож я трохи погуглив і з’ясував, що якщо ви хочете відобразити HTML-сутності :before, вам доведеться використовувати екрановану шістнадцяткову довідку.
Тож я шукав посилання на шістнадцяткову форму, але нічого не знайшов. Я вважаю, що це тому, що це цінності "для приватного користування", що б це не означало.

Чи є спосіб залучити його до роботи :before?

— Свен
джерело

Оскільки посилання 404, можливо, ви говорите про псевдоелементи? Ви намагалися додати content: "";в CSS для свого :beforeелемента?

— Йорданія

цілком впевнений, що це: fortawesome.github.com/Font-Awesome

— Стюарт Берроуз

Так, вибачте хлопці! Посилання виправлено зараз! @tsujp Насправді значок повинен відображатися всередині псевдоелемента.

— Свен

Строго кажучи, ви не можете відображати HTML-сутності в :before. Ви можете відображати символи Unicode, представлені посиланнями на сутності в HTML, але ви не робите цього, використовуючи синтаксис сутності HTML.

— BoltClock

120

Екрановане шістнадцяткове посилання є \f066.

content: "\f066";

— JJJ
джерело

24

Усім, будь ласка, перегляньте відповідь від super_ton, що вам потрібно буде оголосити сімейство шрифтів за допомогою FontAwesome. Інакше ви отримаєте лише спеціальний символ, а не правильний значок!

— мавпа-лорем

2

Для кожного, хто використовує CSS, проаналізований у PHP, вам потрібно буде двічі вивести шістнадцяткове посилання таким чином: content: "\\ f066";

— ramijames

2

Зверніть увагу, що якщо використовується Font Awesome 5, сімейство шрифтів змінилося. Дивіться тут: stackoverflow.com/a/48004111/83542

— Kildareflare

142

У CSS Unicode FontAwesome працює лише тоді, коли оголошено правильне сімейство шрифтів (версія 4 або менше):

font-family: "FontAwesome";
content: "\f066";

Оновлення - версія 5 має різні назви:

Безкоштовно

font-family: "Font Awesome 5 Free"

Про

font-family: "Font Awesome 5 Pro"

Бренди

font-family: "Font Awesome 5 Brands"

Дивіться відповідну відповідь: https://stackoverflow.com/a/48004111/2575724

— Стефан
джерело

8

Мені подобається, як ви додали частину сімейства шрифтів, тому що саме це змусило мене працювати

— ajk4550

1

Зверніть увагу, що якщо використовується Font Awesome 5, сімейство шрифтів змінилося. Дивіться тут: stackoverflow.com/a/48004111/83542

— Kildareflare

1

єдине сімейство шрифтів: FontAwesome працював у мене. не сімейство шрифтів: "FontAwesome"

— Самеера Р.

Дивно, але у мене нічого не вийшло, крім того, що сказала @Sameera. Можу підтвердити, що станом на 23.10.19 лише сімейство шрифтів: FontAwesome працювало і на мене. Я хотів скористатися значком стрілки FA . Це був мій код:a:last-child:after { font-family: FontAwesome; content: '\f061'; }

— sansae

11

Fileformat.info - досить гарна довідка для цього. У вашому випадку це вже в шістнадцятковому значенні, тож шістнадцяткове значення є f066. Отже, ви зробите:

content: "\f066";

— ньютрон
джерело

Дякую за цю відповідь. Я чомусь не розумів, що ікони перебувають у шістнадцятковій формі. Тому я продовжував ставити «#» у рядок, і це не спрацювало. Зараз це працює.

— снаряд

3

Точки коду, що використовуються у фокусах шрифтів значків, зазвичай є кодами приватного використання, що означає, що вони не мають загальновизначеного значення і не повинні використовуватися при відкритому обміні інформацією, лише за приватною угодою між зацікавленими сторонами. Однак кодові точки приватного використання можуть бути представлені як будь-яке інше значення Unicode, наприклад, у CSS, використовуючи позначення типу \f066, як відповіли інші. Ви навіть можете ввести кодову точку як таку, якщо ваш документ закодований UTF-8 і ви знаєте, як ввести довільне значення Unicode за його номером у вашому середовищі розробки (але, звичайно, воно зазвичай відображається із символом невідомого персонажа).

Однак це не звичайний спосіб використання шрифтів значків. Зазвичай ви використовуєте файл CSS, що постачається зі шрифтом, і використовуєте такі конструкції, як <span class="icon-resize-small">foo</span>. Потім код CSS подбає про вставку символу на початку елемента, і вам не потрібно знати номер кодової точки.

— Юкка К. Корпела
джерело

1

Спочатку зв’яжіть CSS-файл fontwaesome у вашому HTML-файлі, а потім створіть псевдо-клас після або перед таким, як "font-family:" FontAwesome "; content:" \ f101 ";" потім збережіть. Я сподіваюся, ця робота хороша.

— Ашрафул Алам
джерело