CSS İkonlar (Icons)

CSS İkon Nedir? CSS İkon Nasıl Kullanılır? CSS İkon Nasıl Eklenir? CSS İkon Çeşitleri Nelerdir?

CSS Şubat 5, 2022 0 8024 Okuma Listesine Ekle

CSS İkonlar (Icons)

İkon Ekleme

İkonlar, bir ikon kitaplığı kullanılarak HTML sayfanıza kolayca eklenebilir.

HTML sayfanıza ikon eklemenin en basit yolu, Font Awesome gibi bir simge kitaplığı kullanmaktır.

Belirtilen ikon sınıfının adını herhangi bir satır içi HTML öğesine ekleyebilirsiniz. (<i> veya <span> gibi)

Aşağıdaki ikon kitaplıklarındaki tüm ikonlar, CSS ile özelleştirilebilir. (boyut, renk, gölge vb.)

Font Awesome İkon Ekleme

Font Awesome ikonları kullanmak için öncellikle fontawesome.com'a gitmelisiniz, daha sonra oturum açın ve HTML sayfanızın <head> bölümüne eklemek üzere bir kod alın ve sitenize ekleyin.

Örnek:

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

Örnek:

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

Bootstrap İkon Ekleme

Bootstrap ikonlarını kullanmak için HTML sayfanızın <head> bölümüne aşağıdaki satırı ekleyin.

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

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

Google İkon Ekleme

Google simgelerini kullanmak için HTML sayfanızın <head> bölümüne aşağıdaki satırı ekleyin.

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

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