CSS Ikoner

Sådan tilføjer du ikoner

Den nemmeste måde at tilføje ikoner til en HTML-side er ved at bruge en ikonbibliotek, såsom Font Awesome.

Tilføj navnet på den specifikke ikonklasse til ethvert inline HTML-element (f.eks. <i> eller <span>).

Alle ikoner i den nedenstående ikonbiblioteket er skalable vektorer og kan tilpasses ved hjælp af CSS (størrelse, farve, skygger osv.).

Font Awesome ikoner

Hvis du vil bruge Font Awesome ikoner, besøg fontawesome.com, log ind og få koden til at tilføje til <head>-sektionen af din HTML-side:

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

Læs mere om, hvordan du kommer i gang med at bruge Font Awesome i vores Font Awesome 5 guide.

Bemærk:Ingen download eller installation nødvendig!

Eksempel

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

Prøv det selv

Bootstrap ikoner

Hvis du vil bruge Bootstrap glyphicons, skal du tilføje denne linje i <head>-sektionen af din HTML-side:

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

Bemærk:Ingen download eller installation nødvendig!

Eksempel

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

Prøv det selv

Google ikoner

Hvis du vil bruge Google ikoner, skal du tilføje følgende linje i <head>-sektionen af din HTML-side:

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

Bemærk:Ingen download eller installation nødvendig!

Eksempel

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">sky</i>
<i class="material-icons">favorit</i>
<i class="material-icons">vedhæftning</i>
<i class="material-icons">computer</i>
<i class="material-icons">trafik</i>
</body>
</html>

Resultat:

Prøv det selv