Иконни шрифтове: плюсове и минуси на Font Awesome

Шрифтовете за икони се използват за включване на определени стандартни икони в съдържанието на вашия уебсайт. В Шрифт „Страхотно“ е добър пример, който предлага много предимства пред други шрифтове за икони. Предлагаме също да използвате Икони шрифтове от Freepik като добра алтернатива.

Font Awesome първоначално е проектиран от Дейв Ганди за използване с Twitter Bootstrap. Font Awesome може да се използва с WordPress с помощта на Плъгин Font Awesome Icons проектирана от Рейчъл Бейкър.

Ето кратко въведение в такива шрифтове и къде страхотният шрифт се вписва в стил, който все още може да е в начален стадий.

Защо да използвате шрифтове за икони

Когато проектирате уебсайт, изображенията заемат много уеб пространство поради размера на файловете си. Те също трябва да бъдат извикани до вашите уеб страници с помощта на HTML маркиране. Не само това, но мащабирането им често е проблем, губейки дефиниция, тъй като се увеличават по размер. Обикновеното изображение се разрешава по предназначение само когато се използва в първоначално проектираните му размери.

Когато търсите стандартни изображения на икони, като например за превозни средства, определени пунктуационни знаци или икони за графични диаграми, шрифтовете за икони могат да ви предложат мащабируеми изображения, които изглеждат еднакви, независимо от размера на шрифта. Това е точно както буквите и цифрите изглеждат еднакви, независимо дали използвате размер на шрифта 2 или 5 или 10 или 24 точки.

В много случаи хората просто не използват изображения поради този проблем и тяхната статия или онлайн доклад страдат от подробности или яснота поради това. Използвайки Font Awesome, те могат да добавят основни икони към своите сайтове и да ги мащабират до необходимия размер, ограничен само от размерите на техните документи – и могат да го направят, без да губят дефиниция. Можете да разглеждате мащабируемите икони по същия начин като мащабируемите шрифтови знаци.

Ето селекция от наличните видеоплейър и социални икони:

А също и новите икони, които идват с версия 3.0:

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

Това основно могат да правят шрифтовете за икони и по-специално шрифтът Awesome. Ето малко информация как да ги използвате и да се възползвате най-добре от тях, както и един или два недостатъка, свързани с фронтовете на иконите:

Използване на Font Awesome

С нормален Bootstrap CSS:

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

В секцията Head на вашия HTML местоположението на font-awesome.min.css трябва да бъде посочено по следния начин:

Пътят на шрифта е относителен от вашата CSS директория.

С Bootstrap по-малко:

Ако използвате Twitter Bootstrap с ПО-МАЛКО CSS, тогава първо копирайте директорията с шрифтове Font Awesome във вашия проект и font-awesome-less във вашата директория Bootstrap Less. Тогава:

• а) Отворете 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 Generator

Генераторът на Font Awesome е един от най-добрите налични в момента безплатни шрифтове за икони. Въпреки че е проектиран за използване с Twitter Bootstrap, той може да бъде адаптиран за използване на обикновени уебсайтове и има наличен плъгин за WordPress, който предлага най-доброто от този шрифт за икони. Ако използвате шрифтове за икони, опитайте Font Awesome, защото може да бъдете приятно изненадани, след като го овладеете.

* Приставката Font Awesome Icons WordPress е достъпна от https://github.com/rachelbaker/