CSS Ikone
Šta su CSS Ikone?
CSS Ikone su sličice koje se upotrebljavaju za razne svrhe, najčeše kao zamjena za neki tekst.
Svaka stranica ima HOME link (link koji vraća na početnu stranicu). Ponekad HOME link ne izgleda tako lijepo kada je tekstualno napisan, ili se ne uklapa u dizajn stranice, u tom slučaju možemo dodati ikonu kućice, kao zamjenu za tekst.
home favorite thumb_up menu photo map email forward send cloud
Ikonice možemo dodati koristeći neku od postojećih biblioteka na internetu.
Google ikonice
Jadna od poznatijih biblioteka na internetu je google biblioteka ikonica.
Da bi koristili google ikonice, potrebno je da povežete vašu stranicu sa google bibliotekom na internetu.
To možete uraditi pomoću sljedećeg linka:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Kopirajte link iznad, i zalijepite ga u head (zaglavlje) vaše stranice.
Napomena: Kod ovakve upotrebe nije potrebno da skidate, ili instalirate bilo kakav materijal!
Nakon što ste povezali google biblioteku, sada je potrebno da dodate željene ikonice na vašu stranicu.
To možete uraditi pomoću elementa <i>, u kome dodate sljedeći atribut class="material-icons".
Sada je samo potrebno da stavite naziv ikonice unutar elementa <i>.
Biblioteku ikonica možete pogledati na sljedećem linku: Google ikonice
Primjer:
home favorite thumb_up cloud
< !DOCTYPE html>
<html>
<head>
<title> Naslov </title>
</head>
<body>
<i class ="material-icons">home</i>
<i class ="material-icons">favorite</i>
<i class ="material-icons">cloud</i>
<i class ="material-icons">cloud</i>
</body>
</html>
Boje ikonica
Boje ikonica možete mijenjati jednostavno pomoću CSS style atributa.
Primjer:
home favorite thumb_up cloud
< !DOCTYPE html>
<html>
<head>
<title> Naslov </title>
</head>
<body>
<i class ="material-icons">home</i>
<i class ="material-icons" style ="color: red;">favorite</i>
<i class ="material-icons" style ="color: #3b5998;">cloud</i>
<i class ="material-icons" style ="color: purple;">cloud</i>
</body>
</html>
Veličina ikonica
Veličinu ikonica mijenjate također pomoću CSS style atributa, tako što ćete koristiti parametar font-size.
Primjer:
home home home home
< !DOCTYPE html>
<html>
<head>
<title> Naslov </title>
</head>
<body>
<i class ="material-icons" style ="font-size: 30px;">home</i>
<i class ="material-icons" style ="font-size: 60px;">home</i>
<i class ="material-icons" style ="font-size: 90px;">home</i>
<i class ="material-icons" style ="font-size: 120px;">home</i>
</body>
</html>