Kaip apversti / pakeisti mastelį / paryškinti ir kitaip sukonstruoti savo nuostabias piktogramas

Taigi jūsų programoje naudojamos nuostabios piktogramos, tačiau jos atrodo kaip visos kitos programos ir jums reikia kažko labiau pritaikyto. Aš buvau toje pačioje valtyje ir praleidau laiką tyrinėdama, kaip sukurti savo išvaizdą. Štai keletas metodų, kuriuos radau, jei norite, kad jūsų „Fontawesome“ piktogramos taptų jums labiau patrauklios, pasukamos, keičiamos mastelio keitimo, paryškinimo, mastelio keitimo, spalvinimo ir kitais būdais. Kai kurios yra palaikomos „Fontawesome“ klasės, o kai kurios - CSS.

Apverskite

„Fontawesome“ sukūrė palaikymą bendriems poreikiams patenkinti per dvi klases:

fa-flip- * (parinktys: horizontali, vertikali)
 
 

Pasukti

Tas pats pasukimo ir kardinalios kryptys:

fa-rotate- * (parinktys: 90, 180, 270)
 
 
 

Didesnis

„Fontawesome“ taip pat įtraukė jus, jei norite padidinti savo piktogramas, kad jos būtų didesnės. Tiesiog pridėkite palaikomas klases dideliems, 2x, 3x, 4x ir 5x standartiniams dydžiams:

fa- * (parinktys: lg, 2x, 3x, 4x, 5x)
  fa-lg
  fa-2x
  fa-3x
  fa-4x
  fa-5x

Mažesnis

O kas, jei jums reikia sumažinti savo piktogramas, kad jos atitiktų jūsų išdėstymą, formą ar perdengimą ant kitų piktogramų? „Fontawesome“ nesiūlo tam skirtų užsiėmimų. Kadangi piktogramos rodomos kaip šriftas, galite pridėti bet kurią CSS, kurią paprastai naudotumėte šrifto mastelio keitimui pagal piktogramą:

Tiesiog sukurkite CSS klasę (atsižvelgiant į bet kokį specifiškumo lygį, kurį jums reikia patraukti į piktogramą / saitą) ir nukreipkite ją į piktogramos parinkiklį:

.fa-search {
  šrifto dydis: 0.5em;
}
 

„Fontawesome“ pagrįstai rūpinasi prieinamumu. Manau, kad kas nors mažesnis už standartinį dydį gali sukelti problemų kai kuriems vartotojams ir turėtų būti naudojamas tik neesminiams dizaino elementams, o ne kritiniam UX.

Spalva

Tiesiog naudokite pasirinktinę CSS klasėje ir jums gera eiti. Kaip pavyzdį mes horizontaliai apverstoje piktogramoje naudojame ir šrifto dydį, ir spalvą:

.fa-search {
  šrifto dydis: 3.0em;
  spalva: mėlyna;
}
 

Jūs, žinoma, galite pritaikyti įprastus užvedimo efektus, kad pakeistumėte spalvą ir padidintumėte mastelį, kad užklijuotų jūsų piktogramos.

Bold / Light

Čia mes vengiame kelio ir viskas pradeda keistis. Iki šiol mes naudojome (1) „Fontawesome“ pateiktas klases (2) standartinius šriftų stilius iš CSS. Dabar naudosime keletą iš mažiau naršyklių suderinamų šriftų efektų, kad pridėtume papildomą pritaikymą. Tiesą sakant, nuo 2016 m. Liepos mėn. Tai yra žemiau pateiktų variantų, kurie visi naudoja -webkit-text-stroke, suderinamumo lentelė:

Jokio netikėtumo, jokio IE. Dabar su juo!

„Fontawesome“ nėra paryškintos klasės. Ir nemanytumėte, kad jums to reikės. Bet radau norą suderinti brūkšnio plotį ant kelių skirtingai ištaškytų piktogramų, kad jos būtų geriau koordinuojamos. Taip pat galite tai padaryti norėdami koordinuoti gretimą tekstą, kurio brūkšnys yra storesnis ar plonesnis nei jūsų „Fontawesome“ piktograma.

Tai, kas išdėstyta aukščiau, taiko fono spalvos brūkšnį, kad piktograma būtų plona, ​​arba šrifto spalvos brūkšnį, kad piktograma būtų stori.

.fa-search {
  -Webkit-text-stroke: 2px balta; /* fono spalva */
  spalva: mėlyna;
}
.fa-search {
  -Webkit-text-stroke: 3px mėlyna; /* šrifto spalva */
  spalva: mėlyna;
}

Kontūras

Jūs netgi galite derinti potėpį ir užpildymą, kad gautumėte kontūro ar dvigubos spalvos efektą:

.fa-search {
  -Webkit-text-stroke: 2px mėlyna;
  -webkit-teksto užpildymo spalva: žalsvai mėlyna;
}

Tiesiog dar kartą atsiminkite, kad tai netaps suderinamu su naršyklėmis. (Aš jums sakiau, kad galėtumėte šiek tiek eksperimentuoti su teksto šešėliais IE, kad pagreitintumėte visą jūsų programą ...)

Viskas!

Naudodamiesi įmontuotų „Fontawesome“ klasių pagalba ir turėdami savo pasirinktinę CSS, jūs pasiruošę parodyti savo piktogramas.