CSS İkon

Simgeler nasıl eklenir

HTML sayfasına simge eklemenin en basit yolu, Font Awesome gibi bir simge kitaplığı kullanmaktır.

Belirtilen simge sınıf adını herhangi bir satır içi HTML elementine (örneğin <i> veya <span>) ekleyin.

Aşağıdaki simge kitaplığındaki tüm simgeler ölçeklenebilir vektörel simgelerdir ve CSS ile özelleştirilebilir (boyut, renk, gölge vb.).

Font Awesome simgeleri

Font Awesome ikonlarını kullanmak için fontawesome.com'a gidin, giriş yapın ve kodu alarak HTML sayfasının <head> bölümüne ekleyin:

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

Font Awesome 5 kullanmaya nasıl başlanacağına dair daha fazla içerik için Font Awesome 5 rehberimizi okuyun.

İpucu:İndirme veya kurulum gerekmez!

Örnek

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

Sonuç:

Kişisel Deneyim

Bootstrap ikonları

Bootstrap glyphicons kullanmak için HTML sayfasının <head> bölümüne bu satırı ekleyin:

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

İpucu:İndirme veya kurulum gerekmez!

Örnek

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

Sonuç:

Kişisel Deneyim

Google ikonları

Google ikonlarını kullanmak için HTML sayfasının <head> bölümüne aşağıdaki satırı ekleyin:

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

İpucu:İndirme veya kurulum gerekmez!

Örnek

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

Sonuç:

Kişisel Deneyim