Ikony CSS

Obsah

    Zobrazit obsah

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 (například <i> nebo <span>).

Všechny ikony v knihovnách ikon níže jsou škálovatelné vektory, které mohou 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 části <head> své stránky HTML:

<script; src="https://kit.fontawesome.com/váš kód.js" crossorigin="anonymní"></script>

Přečtěte si více o tom, jak začít s Font Awesome v našem Písmo Úžasný tutoriál 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 :

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

<h1>Font Awesome icon library</h1>

<p>Some Font Awesome icons:</p>
<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>

<p>Styled Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Ú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 části <head> své 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 :

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">

<h1>Bootstrap icon library</h1>

<p>Some Bootstrap icons:</p>
<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>
<br><br>

<p>Styled Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Ikony Google

Chcete-li použít ikony Google, přidejte do části <head> stránky HTML následující řádek:

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 :

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<h1>Google icon library</h1>

<p>Some Google icons:</p>
<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>
<br><br>

<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

Úplný seznam všech ikon naleznete na našem webu Ikona výukový program.