Как да прелиствате / мащабирате / смели и иначе да оформяте вашите икони на Fontawesome

Така че приложението ви използва икони на Fontawesome, но те изглеждат точно като всяко друго приложение и имате нужда от нещо по-персонализирано. Бях в една и съща лодка и прекарах време за проучване как да приведа собствения си облик. Ето някои методи, които открих за прелистване, въртене, мащабиране, удебеляване, мащабиране, оцветяване и по друг начин да направя вашите икони на Fontawesome повече. Някои от тях се поддържат класове от Fontawesome, а някои са CSS.

Flip

Fontawesome има вградена поддръжка за общите нужди на плъзгане чрез два класа:

fa-flip- * (опции: хоризонтална, вертикална)
 
 

Завъртане

Същото е и за въртене и за основни направления:

fa-rotate- * (опции: 90, 180, 270)
 
 
 

по-голям

Fontawesome също ви покрива, ако искате да увеличите мащабите на иконите си, за да ги увеличите. Просто добавете поддържани класове за големи, 2x, 3x, 4x и 5x стандартния размер:

fa- * (опции: lg, 2x, 3x, 4x, 5x)
  fa-lg
  fa-2x
  fa-3x
  fa-4x
  fa-5x

По-малък

Но какво ще стане, ако трябва да намалите мащаба на вашите икони, за да отговарят на вашето оформление, форма или наслагване върху други икони? Fontawesome не предлага класове за това. Въпреки това, тъй като иконите се показват като шрифт, можете да добавите всеки CSS, който обикновено използвате за мащабиране на шрифт за мащабиране на иконата:

Просто създайте CSS клас (с каквото и ниво на специфичност да се нуждаете, за да вземете иконата / връзката) и насочете това към селектора на иконата:

.fa-search {
  размер на шрифта: 0,5ем;
}
 

Fontawesome с право се грижи много за достъпността. Предполагам, че всичко, което е по-малко от стандартния размер, може да създаде проблеми за някои потребители и трябва да се използва само за несъществени елементи на дизайна, а не за критични UX.

цвят

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

.fa-search {
  размер на шрифта: 3.0ем;
  цвят: син;
}
 

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

Смели / леки

Това е мястото, където се отклоняваме от пътя и нещата започват да стават леко хапливи. Досега използвахме (1) предоставените класове на Fontawesome (2) стандартни стилове на шрифтове от CSS. Сега ще използваме някои от по-малко съвместимите с браузъра ефекти на шрифта, за да добавим някои допълнителни персонализиране. В действителност, от юли 2016 г. това е таблицата за съвместимост за следните стилове, които всички използват -webkit-text-stroke:

Няма изненада, няма IE. Сега, с това!

Fontawesome няма смел клас. И не бихте помислили, че ще ви трябва. Но открих, че искам да съвпадна с ширината на хода на няколко различни имитирани икони, за да ги координират малко по-добре. Можете също така да искате да направите това, за да координирате съседен текст, който има по-дебел или по-тънък ход от вашата икона на Fontawesome.

Гореизложеното прилага штрих за цвят на фона, за да направи иконата тънка или щрих в цвета на шрифта, за да направи иконата дебела.

.fa-search {
  -webkit-text-stroke: 2px бяло; /* Цвят на фона */
  цвят: син;
}
.fa-search {
  -webkit-text-stroke: 3px синьо; / * цвят на шрифта * /
  цвят: син;
}

очертание

Можете дори да комбинирате ход и запълване, за да получите контур или двоен цветен ефект:

.fa-search {
  -webkit-text-stroke: 2px синьо;
  -webkit-text-fill-color: cyan;
}

Просто не забравяйте отново, че това няма да ви пресече съвместимостта на браузъра. (Казвах ви, че можете да експериментирате със сенки за текст в IE, за да увеличите скоростта на цялото си приложение ...)

Това е!

С помощта на вградените в класове на Fontawesome и вашия собствен CSS, вие сте готови да направите иконите си поп.