Kuriant tinklapį dažnai prireikia naudoti įvairias piktogramas, reiškiančias tam tikrus veiksmus sistemoje. Internete yra begalės skirtingų ikonų rinkinių, įvairių formatų – ar pavienės ikonos, ar sprite-sheet’ai ir t.t. Bet yra dar vienas, mano manymu patogiausias, būdas kaip atvaizduoti tokias smulkias piktogramas.
Taigi – ikonų šriftai. Tai specialiai sukurti šriftai (paprasti, kaip tai būtų koks Times New Roman, Verdana ar kt.), kuriuose vietoj raidžių atvaizduojamos piktogramos. Vienas iš tokių šriftų, su kuriuo neseniai teko susidurti – Entypo. Yra labai daug įvairių dažnai naudojamų simbolių.

Kaip naudojamas?

Visų pirmą reikia nurodyti naršyklei kas čia per šriftas. Tai padarome su viena paprasta CSS komandėlę:

@font-face
{
  font-family: Entypo;
  src: url('/kelias/iki/Entypo.ttf');
}

Vėliau, norint atvaizduoti kokį nors simbolį, elementui priskiriam šitą font-family, bei įrašome reikiamą simbolį (simbolių lentelė pateikta čia).

Pagrindiniai privalumai

  • Nenaudojami paveikslėliai. Toks šriftas gali užimti ženkliai mažiau kilobaitų, negu didelis sprite-sheet’as iš ikonų – greitesnis tinklapio krovimosi laikas.
  • Manipuliacijos. Kas būna, kai reikia ikoną padidinti, sumažinti, arba pakeisti jos spalvą be kokybės praradimo? Tam prireikia arba dar silpnai palaikomų CSS filtrų, arba skirtingų ikonų rinkinių. Ikonų šrifto atveju šita problema išssisprendžia – šriftas yra vektorinis, tad kokį font-size bei color nustatysi, tokia ikona ir bus. Taip pat galima atlikti bet kokias kitas transformacijas, kaip ir su bet kuriuo kitu tekstu.

Minėtas šriftas taip pat turi skirtingus šriftų išplėtimus – papildomas ikonas, skirtingo storio ir stiliaus simboliai ir t.t. Bendrai paėmus, manau toks ikonų naudojimas dauguma aspektų yra geresnis, palyginus su ikonomis-paveikslėliais. Ypač tada, kai yra būtinybė naudoti daug skirtingų ikonų.