Bir HTML sayfasına ikon eklemenin en basit yolu, bir ikon kütüphanesi kullanmakdır.
En popüler ikon kütüphanesi Font Awesome'dır. Font Awesome benzeri pek çok ikon kütüphanesi mevcuttur.
Web sayfasına bir ikon eklemek için satır içi (<span> veya <i> gibi) bir element kullanılır.
HTML sayfanızda Font Awesome ikonları kullanmak istiyorsanız öncelikle Font Awesome CSS kütüphanesine sayfanızda link vermelisiniz.
HTML sayfanızda <head> bölümüne şu kodu yerleştirmelisiniz:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
Bir başka CSS ikon kütüphanesi Bootstrap ikon kütüphanesidir.
Bootstrap ikon kütüphanesini kullanabilmek için HTML sayfanızda <head> bölümüne şu kodu yerleştirmelisiniz:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Not: Bootstrap CSS kütüphanesi için herhangi bir yükleme yapmanıza gerek yoktur.
<!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-thumbs-up"></i>
</body>
</html>
Google tarafından hazırlanan Google ikonları yine herhangi bir indirme yapmadan kullanabileceğiniz ikon kütüphanesidir.
Google ikon kütüphanesini kullanabilmek için HTML sayfanızda <head> bölümüne şu kodu yerleştirmelisiniz:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!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>