NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








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>





<< >>



© Copyright 2018. nedschool.com