TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як виправити чудові піктограми шрифтів, які відображаються у вікні?

8

У веб -розробці прийнято використовувати значки шрифтів у форматі SVG замість того, щоб вводити символи за допомогою сутностей. Наприклад, значки Font Awesome користуються найбільшою популярністю через масштабованість іконок без втрати якості. Однак, якщо ви не реалізуєте належним чином шрифт, чудові значки відображатимуться як поле. Якщо у вас виникли проблеми з піктограмами шрифтів, перевірте, як це виправити.

Використання чудових значків шрифтів на веб -сайті

Існує два способи використання значків шрифтів на вашому веб -сайті. Один із них – використання тегів HTML, а інший – використання псевдокласів CSS. В обох методах ви повинні зв’язати вихідний шрифт чудового CSS і розмістити файли шрифтів на вашому сервері, щоб до іконок можна було застосувати відповідні стилі. Нижче наведено приклад використання шрифту awesome у HTML:

Як виправити чудові піктограми шрифтів, які відображаються у вікні?

Використання чудового шрифту

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

Як виправити чудові піктограми шрифтів, які відображаються у вікні?

Значок шрифту Посівний ящик

Чому чудові значки шрифтів відображаються у вигляді вікна?

Для того, щоб вставити піктограму шрифту на свій сайт, необхідно мати наступне:

  • Розміщуйте шрифти на своєму сервері
  • Посилання на правильний шрифт, чудова версія CSS
  • Немає конфлікту зі старою та новою версіями на тому ж сайті
  • Перевірте правильність сімейства шрифтів
  • Використовуйте належний клас CSS
  • Перевірте вагу шрифту
  • Перевірте код вмісту CSS

Давайте детально розглянемо пункт легкості.

1 Розмістіть шрифти на своєму сервері

Щоб використовувати чудовий шрифт на своєму веб -сайті, необхідно розмістити файли шрифтів також у тому самому каталозі. Усі шрифти веб -шрифтів повинні бути доступні у папці “/webfonts" та посилатися на них у CSS, що знаходиться у папці “/css”.

У більшості випадків використовувана вами тема або плагін встановить усі необхідні файли CSS та шрифтів на вашому сервері. Це так, особливо якщо ви використовуєте WordPress для свого веб -сайту.

2 Посилання Правильна версія CSS

Шрифт awesome був доступний безкоштовно до версії 4.70. Однак доступні як безкоштовні, так і професійні версії, починаючи з версії 5.0. Хоча версія 4.70 була застарілою, більшість безкоштовних плагінів і тем все ще використовують 4.70 через єдиний клас CSS та простоту використання. Однак версія 5.0 має бренди та надійні стилі для безкоштовних користувачів, і ви можете використовувати all.css для включення обох стилів.

Ви можете зареєструватись на веб -сайті з чудовим шрифтом, щоб отримати комплект CDN, або скористатися файлами CDN, доступними у Cloudflare.

Як виправити чудові піктограми шрифтів, які відображаються у вікні?

Отримайте чудовий комплект шрифтів CDN

3 Суперечливі версії CSS

Однією з проблем, з якими ми зіткнулися на веб -сайті WordPress, є те, що плагін використовував версію 4.70, а тема – 5.0. Це стало причиною конфлікту через несумісні коди класів та вмісту CSS. Тому обов’язково використовуйте останню версію 5.0 із відповідним вихідним файлом CSS на своєму сайті.

Як виправити чудові піктограми шрифтів, які відображаються у вікні?

Значки шрифтів відображаються у вигляді вікна

4 Використовуйте правильну сімейство шрифтів

Для того, щоб використовувати чудовий шрифт з CSS, вам слід використовувати належне сімейство шрифтів. Нижче наведено тип коду CSS, який використовується у версії 4.70.

.li: перед {
content: “00A3 ″; font-family: “FontAwesome”; вага шрифту: нормальний; }

Однак тут буде показано поле замість значка з версією 5.0. Вам слід використовувати наступний CSS з безкоштовною версією 5.0.

.li: перед {
content: “00A3 ″; font-family: " Font Awesome 5 Free "; вага шрифту: 900 ; }

Тому переконайтеся, що ви використовуєте правильне сімейство шрифтів «Font Awesome 5 Free» у CSS. Крім того, якщо ви використовуєте соціальні значки, то сімейство шрифтів має бути "Font Awesome 5 Brands". Це дві сімейства шрифтів, доступні для безкоштовних користувачів.

5 Використовуйте правильний префікс стилю CSS

Інша плутанина полягає в тому, що версія 5.0 має різні класи CSS, ніж попередні версії. У версії 4.7 ви можете використовувати префікс стилю fa, як показано нижче:

<i class = “fa fa-camera”>

Однак це не працюватиме з версією 5.0 і далі. Префікс стилю fa був застарілим, і вам слід використовувати fas для однотонних значків і fab для ікон соціального бренду, таких як Facebook.

6 Перевірте вагу шрифту

Шрифт awesome версія 5.0 не підтримує загальне оголошення "font-weight: normal" у CSS. Ви повинні задекларувати певну вагу шрифту для відображення значка.

7 Перевірте код вмісту CSS

Останній момент – переконатися, що код вмісту, який використовується в CSS, правильний. Ви повинні використовувати один із доступних кодів із сайту awesome site у псевдоелементі CSS. Крім того, не забудьте використовувати код у форматі “f00d”; щоб правильно показати піктограму.

Резюме

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

Стиль Наявність Вага шрифту Префікс стилю Сімейство шрифтів
Твердий Безкоштовно 900 ви робите Шрифт Awesome 5 Free або Font Awesome 5 Pro
Звичайний Pro 400 далеко Шрифт Awesome 5 Pro
Світло Pro 300 fal Шрифт Awesome 5 Pro
Duotone Pro 900 примха Шрифт Awesome 5 Duotone
Бренди Безкоштовно 400 fab Шрифт Awesome 5 Brands

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі