Icon web font – jak to działa

Icon web font – jak to działa
6 May 2013

Jest wiele sposobów wstawieni oa ikonki na stronę w postaci obrazka, ja zaprezentuje Ci alternatywę.

Zapewne wiele razy spotkałeś się z małymi ikonkami przed czy też po jakimś linku, w nawigacji itd. Taką ikonkę może każdy w bardzo prosty sposób osadzić na stronie, jak w wielu poradnikach, robimy w photoshopie ikonke, lub też zestaw ikon, jeśli korzystamy z tzw. Spite’ów. Nie każdy jednak wie, że istnieje inny sposób na uzyskanie takiego samego efektu nie za pomocą obrazu, a zwykłego tekstu. Do tego właśnie służą nam tzw. Obrazkowe czcionki (icon web font).

 

Web-Sysmbols-Font
Jak już wspomniałem, możemy zamiast obrazka wykorzystać specjalną czcionkę i odpowiedni CSS. Wystarczą nam pseudoklasy :before i :after. Oto przykład:

IMG_20130506_155211-1

Taki efekt możemy uzyskać stosując odpowiednią czcionkę, jednak musimy ją najpierw umieścić na stronie, możemy się męczyć samemu z font-face, lub skorzystać z @font-face’a generatora. Wystarczy pobrać interesującą nas czcionkę w formacie TTF i wysłać na serwer. Generator zrobi reszte i pokieruje nas co dalej. Oto gotowy kod CSS powyższego przykładu

a:before, a:after{
     font-family:'Heydings';
}

a[href*="rss"]:before {
     color:#c03f29;
     content:'R';
}

a[href*="rss"]:after {
     vertical-align:super;
     font-size:16px;
     content:'e';
}

Czcionkę użytą w tym przykładzie (ikony) można pobrać stąd. Jest oparta na licencji SIL Open font licence w wersji 1.1