Ikony CSS
Ikony lze snadno přidat na vaši stránku HTML pomocí knihovny ikon.
Jak přidat ikony
Nejjednodušší způsob, jak přidat ikonu na stránku HTML, je pomocí knihovny ikon, jako je Font Awesome.
Přidejte název zadané třídy ikon do libovolného vloženého prvku HTML (jako <i>nebo
<span>).
Všechny ikony v knihovnách ikon níže jsou škálovatelné vektory, které lze přizpůsobit pomocí CSS (velikost, barva, stín atd.)
Písmo úžasné ikony
Chcete-li použít ikony Font Awesome, přejděte na
fontawesome.com , přihlaste se a získejte kód, který přidáte do <head>části stránky HTML:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Přečtěte si více o tom, jak začít s Font Awesome v našem výukovém programu Font Awesome 5 .
Poznámka: Není vyžadováno žádné stahování ani instalace!
Příklad
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
Výsledek:
Úplnou referenci o všech ikonách Font Awesome naleznete v naší Referenční příručce ikon .
Bootstrap ikony
Chcete-li použít symboly Bootstrap, přidejte do <head>části stránky HTML následující řádek:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Poznámka: Není vyžadováno žádné stahování ani instalace!
Příklad
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
Výsledek:
Ikony Google
Chcete-li použít ikony Google, přidejte do <head>části stránky HTML následující řádek:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Poznámka: Není vyžadováno žádné stahování ani instalace!
Příklad
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
Výsledek:
Úplný seznam všech ikon naleznete v našem výukovém programu ikon .