Dobrý den, v tomto případě se tu nabízí několik možností.
1) Využití ikon obsažených ve Font Awesome CSS toolkitu
http://fortawesome.github.io/Font-Awesome/ - Seznam ikon
http://fortawesome.github.io/Font-Awesome/icons/ - Vložení pomocí linku na css styl do hlavičky webu <head></head>
Kód: Vybrat vše
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> - Vložení ikony poté tedy bude vypadat v html následovně
Kód: Vybrat vše
// fa-lg fa-2x-5x jsou velikosti ikony (čím větší hodnota, tím větší ikona)
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x2) Možnost si vytvoření 2 vlastních obrázků s transparentním pozadím.
- První obrázek bude barva v normálním stavu a druhý obrázek bude v barvě při aktivovaném/hover stavu.
- Následně ihned za koncem řetězce textu v <li></li> menu se vloží div s třídou která musí být definována v css.
Kód: Vybrat vše
...
<li>Položka v menu <div class="nazevtridy"></div></li>
...
- V css bude třída s tímto obrázkem vypadat následovně
Kód: Vybrat vše
.nazevtridy {
background-image:url('../images/obrazek1.png');
}
.nazevtridy:hover {
background-image:(url('../images/obrazek2.png');
}
Více se mi jich tu nechce vypisovat, v případě zájmu mě prosím kontaktuje pomocí soukromé zprávy.
Děkuji za přečtení, jestli ti to pomohlo a chceš mou pomoc ostatním ocenit, podpoř mě karmou.
