Brzina - pouzdanost - kvalitet

Ubacivanje ikonica u HTML kod



English

osnove-objektno-orijentisanog-programiranja

 

Nivo: Osnovni

Ključne reči: ikonice, fontovi, html kod

Kod dizajniranja web stranica često kao detalj nalaze se razne ikonice pored teksta – ikonica kućice za adresu firme, ikonica telefona pored teksta gde je telefon firme, ikonica emial-a itd. Naravno, asortiman ikonica je velik i može se korisiti za mnoge druge vizuelne oznake – na primer ikonica Close za brisanje podataka iz baze, ikonica OK ukoliko je nešto tačno.

Ikonice koje se renderuju u Browseru kao sličice uopšte nisu sličice nego – font. Na primer, dovoljno je da iz običnog Word-a pozovete font Windings i umesto slova pojavljuju se sličice. Po istom principu radi i prikaz ikonica u HTML strani tako što kao podlogu imate određeni font i za svaku ikonicu preko stilova pozivate određenu klasu.

Idemo redom ...

U head sekciju ubacite kod koji poziva folder "icons" gde se nalaze klase unutar CSS fajla (icons.css) i koje definišu položaj svake ikonice u fajlu gde je dat listing svih karaktera za taj font. Takođe u tom folderu se nalazi i fontovi u raznim ekstenzijama.

        
           <link rel="stylesheet" href="icons/icons.css" media="screen"/>	
        
        

Unutar body odeljka odnosno u bilo koji deo HTML koda gde želite da se prikaže određena ikonica unesite kod koji poziva određenu klasu ikonice - klasa Home, search itd. Kao rezultat u Browser-u se prikazuje određena ikonica.

        
            <i class="icon-search"></i>
            <i class="icon-home"></i>
        
        

Nastavak daje prikaz svih ikonica koje ova vežba sadrži sa dodatnim ikonicaма koje su INLINE STILIZOVANE po pitanju boje, veličine itd. Na kraju vežbe možete preuzeti kompletan izvorni kod.

Ikonice - izvorni oblik


Ikonice - stilizovan oblik

Ikonice - stilizovan oblik, veličina i kao link

 

PREUZMITE IZVORNI KOD