Как да добавите страхотни икони на шрифтове към вашите бутони

Font Awesome е удобна библиотека с икони. Тези икони могат да бъдат векторни графики, съхранявани във .svgфайлов формат или уеб шрифтове.

Тези икони се третират точно като шрифтове. Можете да посочите техния размер с помощта на пиксели и те ще приемат размера на шрифта на своите родителски HTML елементи.

Основна употреба

За да включите Font Awesome във вашето приложение или страница, просто добавете следния код към елемента в горната част на вашия HTML:

Най iелемент първоначално е бил използван, за да се направят и други елементи, курсив, но сега често се използва за икони. Можете да добавите класове Font Awesome към iелемента, за да го превърнете в икона, например:

Имайте предвид, че spanелементът е приемлив и за използване с икони.

Ето как добавяте икона:

Това ще доведе до проста икона с палец нагоре:

И ето как бихте вмъкнали тази икона върху бутон:

 Like 

Забележете, че има две части за използване на икона, префикса на стила и името на иконата . В примера по-горе, префикс стил и името икона са fasи fa-thumbs-up, съответно.

Font Awesome предлага следните стилови префикси:

СтилПрефикс на стилаТип на плана
ТвърдоfasБезплатно
РедовенfarPro
СветлинаfalPro
DuotonefadPro
МаркиfabБезплатно

Иконите на марки често се изпращат от самата компания и са полезни за изграждане на неща като бутони за социално удостоверяване или плащане. Тези икони включват Twitter, Facebook, Spotify, Apple и дори freeCodeCamp:

Въпреки че ще имате достъп само до солидни и маркови икони по безплатния план, все още има много начини да ги оформите.

Стилизиращи шрифтови страхотни икони

За прости приложения можете да използвате вградени стилове:

За оразмеряване можете също да използвате вградените ключови думи на Font Awesome:

Важно нещо, което трябва да запомните, е, че иконите FA наследяват font-sizeродителския контейнер. Това означава, че иконите се мащабират с всеки текст, който може да се използва с тях, което поддържа дизайна последователен.

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

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

Можете също така да регулирате размера на иконата директно, като насочите самата икона и я коригирате font-size.

Font Awesome е, добре, страхотен! Като най-популярните набори от инструменти за икони е лесно да ги включите и използвате във всичките си проекти. Сега отидете на иконата нагоре към всички неща.

Повече информация

  • Страхотни документи за шрифтове
  • Всички налични икони Font Awesome