CSS ikon

Hur man lägger till ikoner

Det enklaste sättet att lägga till ikoner till en HTML-sida är att använda en ikonbibliotek, till exempel Font Awesome.

Lägg till namnet på den specifika ikonklassen till vilket inre HTML-element som helst (t.ex. <i> eller <span>).

All ikoner i den här ikonbiblioteket är skalbara vektorer och kan anpassas med CSS (storlek, färg, skuggor osv.).

Font Awesome ikoner

Om du vill använda Font Awesome ikoner, besök fontawesome.com, logga in och få kod att lägga till i <head>-sektionen på din HTML-sida:

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

Läs mer om hur du börjar använda Font Awesome i vår Font Awesome 5-guide.

Tips:Ingen nedladdning eller installation krävs!

Exempel

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

Resultat:

Prova själv

Bootstrap ikoner

Om du vill använda Bootstrap glyphicons, lägg till följande rad i <head>-sektionen på din HTML-sida:

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

Tips:Ingen nedladdning eller installation krävs!

Exempel

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

Resultat:

Prova själv

Google ikoner

Om du vill använda Google ikoner, lägg till följande rad i <head>-sektionen på din HTML-sida:

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

Tips:Ingen nedladdning eller installation krävs!

Exempel

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

Resultat:

Prova själv