Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>SVG ikonky jako sprite</title> <h1>SVG ikonky jako sprite</h1> <h2>Malá tlačítka</h2> <button><span class="icon"></span></button> <button><span class="icon icon-edit"></span></button> <button><span class="icon icon-home"></span></button> <h2>Větší</h2> <div class="vetsi"> <button><span class="icon"></span></button> <button><span class="icon icon-edit"></span></button> <button><span class="icon icon-home"></span></button> </div> <h2>Největší</h2> <div class="nejvetsi"> <button><span class="icon"></span></button> <button><span class="icon icon-edit"></span></button> <button><span class="icon icon-home"></span></button> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.icon { background: url(http://jecas.cz/files/svg/icon.svg) no-repeat; background-size: 1em 3em; width: 1em; height: 1em; display: inline-block; } .icon-edit { background-position: 0 -1em; } .icon-home { background-position: 0 -2em; } .vetsi .icon { font-size: 200%; } .nejvetsi .icon { font-size: 400%; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>