Іконні шрифти: плюси та мінуси Font Awesome

Шрифти піктограм використовуються для включення певних стандартних піктограм у вміст вашого веб-сайту. The Шрифт "Awesome" є особливо гарним прикладом цього, який пропонує багато переваг перед іншими шрифтами значків. Спочатку розроблено Дейв Ганді Для використання з Завантаження Twitter, Font Awesome можна використовувати з WordPress за допомогою Плагін Font Awesome Icons спроектований Рейчел Бейкер.

Ось короткий вступ до таких шрифтів і те, де шрифт Awesome вписується в стиль, який, можливо, все ще знаходиться в зародковому стані.

Навіщо використовувати шрифти іконок

Коли ви розробляєте веб-сайт, зображення займають багато веб-простору через розмір файлів. Їх також потрібно викликати на ваші веб-сторінки за допомогою розмітки HTML. Мало того, їх масштабування часто є проблемою, втрачаючи чіткість, оскільки вони збільшуються в розмірі. Звичайне зображення розв’язується за призначенням лише тоді, коли воно використовується в його початково розроблених розмірах.

Якщо ви шукаєте стандартні зображення значків, наприклад, для транспортних засобів, певні знаки пунктуації або значки графічних діаграм, шрифти піктограм можуть запропонувати вам масштабовані зображення, які виглядають однаково незалежно від розміру шрифту. Це так само, як літери та цифри виглядають однаково, незалежно від того, чи використовуєте ви розмір шрифту 2 чи 5 чи 10 чи 24 пункти.

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

Ось вибір доступних відеопрогравача та соціальних піктограм:

А також нові значки, які постачаються з версією 3.0:

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

Це в основному те, що можуть робити шрифти значків, зокрема шрифт Awesome. Ось деяка інформація про те, як їх використовувати та якнайкраще скористатися ними, а також про один або два недоліки, пов’язані з фасадами піктограм:

Використання Font Awesome

Зі звичайним CSS Bootstrap:

Font Awesome можна використовувати зі стандартним CSS Bootstrap, скопіювавши каталог шрифтів Awesome у свій проект, а потім скопіювавши font-awesome.min.css у проект. Потім ви повинні відкрити font-awesome.min.css і відредагувати шляхи шрифтів, щоб переконатися, що вони вказують на розташування Awesome.

У розділі Head вашого HTML місце розташування font-awesome.min.css має бути зазначено таким чином:

Шлях до шрифту відносний до вашого каталогу CSS.

З завантаженням менше:

Якщо ви використовуєте Twitter Bootstrap з МЕНШИЙ CSS, то спочатку скопіюйте каталог шрифтів Font Awesome у свій проект, а font-awesome-less — у каталог Bootstrap Less. Тоді:

• a) Відкрийте bootstrap.less та замініть @import «sprites.less»; з @import «font-awesome.less»;
• б) Відкрийте font-awesome.less вашого проекту та відредагуйте змінну @FontAwesomePath, щоб вона вказувала на ваш каталог шрифтів.

@FontAwesomePath: "../font";

Шлях до шрифту відносний до вашого скомпільованого каталогу CSS.

Тоді все готово – хоча якщо ви використовуєте статичний компілятор, вам слід перекомпілювати МЕНШЕ.

Не використовує Bootstrap:

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

Якщо ви використовуєте Internet Explorer 7, використовуйте font-awesome-ie7.min.css

Як використовувати Font Awesome в WordPress

Існує два простих способи використання шрифтів іконок у WordPress, один із яких ви завантажили плагін*. Ви можете вставити їх за допомогою HTML або використовувати короткий код. Ось приклади кожного:

Використання HTML: Там, де ви хочете, щоб шрифт був, просто додайте назву елемента до назви класу таким чином: [html] [/html]
додасть чорне коло.

Ви можете змінити розмір кола таким чином:

Ймовірно, вам буде легше додати розмір шрифту до вашої таблиці стилів CSS, якщо ви збираєтеся часто використовувати той самий розмір значка та наведений вище формат для винятків.

Використання шорткоду: Шорткод простіше, але, як правило, працює лише для вмісту публікації та сторінки на екрані редактора дописів. Формат: [icon name=icon-circle], де ви хочете, щоб коло.

Недоліки іконних шрифтів

Здається, що шрифти піктограм чудово використовувати, коли вам потрібно додати певну піктограму до свого блогу або веб-сайту, і їх можна зв’язати для виконання певних функцій. Однак не все ідеально, і у шрифтів іконок також є недоліки. Це поширені проблеми, про які повідомляють користувачі шрифтів піктограм, які не стосуються Font Awesome – тому він такий «Чудовий!»

1. Однією з них є потенційна проблема з програмами зчитування з екрана, які можуть прочитати вголос піктограму як букву алфавіту. Це не проблема з Font Awesome через спосіб отримання символів шрифту.
2. Вони можуть бути представлені лише одним кольором – або кольоровим градієнтом за допомогою градієнтів CSS3. Це справжня проблема зі шрифтами піктограм?
3. Створення спеціального шрифту відповідно до ваших потреб може зайняти час. Проте вже існує великий вибір чудових шрифтів, які пропонує Font Awesome, і список постійно розширюється. Хоча це безкоштовний шрифт із закритим кодом, схвалені шрифти, розроблені користувачами, регулярно додаються.

Підсумок генератора Font Awesome

Генератор Font Awesome є одним із найкращих безкоштовних шрифтів значків, доступних на даний момент. Хоча він був розроблений для використання з Twitter Bootstrap, його можна адаптувати для використання на звичайних веб-сайтах, а також доступний плагін WordPress, який пропонує найкраще з цього шрифту значків. Якщо ви використовуєте шрифти значків, спробуйте Font Awesome, тому що ви можете бути приємно здивовані, коли опануєте його.

* Плагін Font Awesome Icons WordPress доступний на https://github.com/rachelbaker/