CSS Icoon

How to add icons

The simplest way to add icons to an HTML page is to use an icon library, such as Font Awesome.

Add the name of the specified icon class to any inline HTML element (such as <i> or <span>).

All icons in the following icon library are scalable vectors and can be customized using CSS (size, color, shadow, etc.).

Font Awesome icons

Als je Font Awesome-iconen wilt gebruiken, bezoek dan fontawesome.com, log in en kopieer de code om deze toe te voegen aan het <head>-gedeelte van je HTML-pagina:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Lees meer over hoe je Font Awesome begint te gebruiken in onze Font Awesome 5-tutorial.

Hint:Geen downloaden of installeren nodig!

Voorbeeld

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></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>

Resultaat:

Probeer het zelf

Bootstrap-iconen

Als je Bootstrap-glyphicons wilt gebruiken, voeg dan deze regel toe aan het <head>-gedeelte van je HTML-pagina:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Hint:Geen downloaden of installeren nodig!

Voorbeeld

<!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>

Resultaat:

Probeer het zelf

Google-iconen

Als je Google-iconen wilt gebruiken, voeg dan de volgende regel toe aan het <head>-gedeelte van je HTML-pagina:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Hint:Geen downloaden of installeren nodig!

Voorbeeld

<!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>

Resultaat:

Probeer het zelf