Як додати чудові значки шрифтів до ваших кнопок

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

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

Основне використання

Щоб включити Font Awesome у свою програму або сторінку, просто додайте наступний код до елемента у верхній частині HTML:

iЕлемент був спочатку використаний , щоб зробити інші елементи похилими, але в даний час широко використовується для іконок. Ви можете додати до iелемента Font Awesome класи, щоб перетворити його на піктограму, наприклад:

Зверніть увагу, що spanелемент також прийнятний для використання з піктограмами.

Ось як ви додаєте піктограму:

Це дасть простий значок великого пальця вгору:

І ось як ви можете вставити цю піктограму на кнопку:

 Like 

Зверніть увагу, що використання піктограми складається з двох частин, префіксу стилю та назви піктограми . У наведеному вище прикладі префікс стилю та назва піктограми - це fasі fa-thumbs-up, відповідно.

Font Awesome пропонує такі префікси стилів:

СтильПрефікс стилюТип плану
ТвердіfasБезкоштовно
РегулярніfarПро
СвітлоfalПро
ДвотоннийfadПро
БрендиfabБезкоштовно

Значки брендів часто надсилаються самою компанією і корисні для побудови таких речей, як кнопки для соціальної автентифікації або оплати. Ці піктограми включають Twitter, Facebook, Spotify, Apple і навіть freeCodeCamp:

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

Стильний шрифт Awesome іконки

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

Для розміру ви також можете використовувати вбудовані ключові слова Font Awesome:

Важливо пам’ятати, що значки FA успадковують font-sizeбатьківський контейнер. Це означає, що піктограми масштабуються з будь-яким текстом, який може бути використаний з ними, що підтримує узгодженість дизайну.

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

 Like    Dislike    Share 
button { font-size: 1.5em; margin: 5px; }

Ви також можете відрегулювати розмір піктограми безпосередньо, орієнтуючись на саму піктограму та регулюючи її font-size.

Шрифт Awesome - ну, чудовий! Як найпопулярніший набір значків, його легко включити та використовувати у всіх своїх проектах. Тепер перейдіть на іконку вгору.

Більше інформації

  • Шрифти Awesome docs
  • Всі доступні значки Font Awesome