Шрифт Awesome: Повне керівництво бібліотеки

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

Шрифт Awesome Набір значків: остаточне керівництво

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

Шрифт Awesome дає вам масштабовані піктограми вектора, які ви можете легко персоналізувати - розмір, колір, тіні та все інше, що можна зробити за допомогою CSS.

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

У Fontawesome всі іконки абсолютно і абсолютно безкоштовно. Бібліотека ліцензується під загальною публічною службою GNU. Це означає, що він може бути вільно використовуватися в комерційних проектах і, в принципі, скрізь.

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

Як правило, шрифт дивовижні сценарії шрифтів використовуються у поєднанні з bootstrap та bootstrapcdn. Шрифт Awesome - це другий тільки до шрифтів Google у популярності.

Як це працює

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

Шрифт дивовижні іконки створюються за допомогою масштабованих векторів. Тому їх можна збільшити до будь-якого розміру.

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

Чому дизайнери вибирають шрифт дивовижно

Шрифт Awesome має ряд переваг:

• Швидке з'єднання. Вам просто потрібно завантажити спеціальний файл з офіційного веб-сайту та підключити його, вказавши шлях до нього в CSS-коді.
• Гнучкість та масштабованість. Іконки можуть бути збільшені до будь-якого розміру. Символи будуть настільки ж ясно, як дозволяє пристрій. В епоху чутливого дизайну це важливо. До речі, з тієї ж причини, шрифт дивовижні значки підходять для відображення сітківки.
• Стилізація. Іконки можна легко змінити кольором, розміром, тіні або будь-якими іншими зовнішніми параметрами. Дизайнер отримує всі переваги дизайну звичайного тексту. Ви також можете обертати значки. Наприклад, відображення перевернутого вниз або обертання 90 градусів.
• Швидке завантаження сайту. Всі значки включені в один файл шрифту. Таким чином, він має лише один HTTP-запит на завантаження шрифту awesome. Це чудово підходить для виконання веб-сайтів.
• Любов браузерів. Шрифт Awesome - це інструмент перехресного браузера. Вам не доведеться турбуватися про сумісність браузера шрифтів та значків. Вони добре підтримуються всіма. Навіть старий IE8.
• Сумісний з різними рамками. Бібліотека була створена в першу чергу для Bootstrap. Однак він також буде добре працювати з іншими рамками.
• Кілька форматів. Інструмент доступний у .eot, .ttf, .woff та форматах SVG. Таким чином, шрифт дивовижний обробляється так само, як і інші веб-шрифти.
• Не потрібно JavaScript. Шрифт Awesome не вимагає запуску JavaScript.

Таким чином, шрифт Awesome є ефективним та зручним інструментом, який значно зберігає час макета та прискорює ваш веб-сайт.

Недоліки шрифту Awesome

Інструмент також має недоліки. На щастя, немає багато з них.

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

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

Шрифт дивовижні версії: 5 і 6

Шрифт Awesome 5 був випущений 7 грудня 2017 року та спочатку містив 1278 значків. П'ята версія поставляється в двох пакетах: безкоштовно (шрифт Awesome Free) та оплачується (шрифт awesome pro). Вільний план також містить значки з усіх четвертої версії. Іконки доступні під ліцензією SILE відкритих шрифтів 1.1, Creative Commons Attribution 4.0, та MIT.

Шрифт Awesome 6 - це нова версія, яка була випущена у другій половині 2020 року. Вона включає нові піктограми та доступно лише в платній план.

Шрифт Awesome 6 Alpha також на шляху в 2021 році. Це ще одне нове покоління бібліотеки значків. На додаток до нових значків, версія 6 Alpha також додає нові стилі, нові послуги та допоміжні інструменти. Користувачі можуть попередньо замовити.

Безкоштовні та платні плани: відмінності та особливості

Ви можете завантажити значки для безкоштовного або платного тарифного плану.

Вільний план включає понад 1600 значків та 1 комплект. Комплект - це колекція значків, стилів та налаштувань, які дозволяють швидко вносити зміни без додавання коду.

Платний тариф:

• Включає понад 7800 значків та 20 комплектів.
• Надає доступ до шрифту Awesome Pro. Це означає, що значки можуть бути використані в рідних мобільних додатках та на вашому комп'ютері (наприклад, у текстовому редакторі слова або при створенні презентації в PowerPoint).
• Дозволяє завантажувати власні значки. Ви можете використовувати свої власні значки, а також замість офіційних чудових значків шрифту. Наприклад, саме так ви можете завантажити логотип компанії. Ви можете виконувати ті ж дії з власними значками, як з основними - змінити стиль, розмір, колір тощо.

Обидві версії вічні. Тобто вони надаються раз і назавжди.

Способи підключення шрифту Awesome

Перш за все, вам потрібно перейти на офіційний веб-сайт і завантажити бібліотеку. Завантажений архів повинен бути розпакований, а папки CSS та Fonts копіюються до папки вашого сайту.

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

Як відобразити шрифт Awesome значки на веб-сайті. Найпопулярніші методи:

1.Використання html

Найпростіший спосіб.

Вам потрібно перейти до галереї на офіційному веб-сайті (fontawesome.com/icons?d=gallery) і вибрати потрібну вам значок. Кожна піктограма має персональний код, наприклад:. Досить скопіювати та вставити його в потрібне місце в коді.

2. За допомогою CSS

Для цього використовуйте псевдо-елементи після або раніше, а також Unicode необхідної піктограми. Ви можете взяти все це в тій же галереї. Приклад такого коду: F209.

Приклад запису стилю:

div :: Після {display: блок; Вміст: "F209"; Font-Family: "Шрифт Awesome 5 FREE";}

На закінчення: всі шрифти дивовижні іконки

Таким чином, шрифт Awesome є швидким і зручним способом додавати безкоштовні піктограми на ваш веб-сайт. Всі значки легко масштабуються і не сповільнюють сайт.