CSS Simgeleri
Simgeler, bir simge kitaplığı kullanılarak HTML sayfanıza kolayca eklenebilir.
Simgeler Nasıl Eklenir
HTML sayfanıza simge eklemenin en basit yolu, Font Awesome gibi bir simge kitaplığı kullanmaktır.
Belirtilen simge sınıfının adını herhangi bir satır içi HTML öğesine ekleyin ( <i>veya
gibi <span>).
Aşağıdaki simge kitaplıklarındaki tüm simgeler, CSS ile özelleştirilebilen (boyut, renk, gölge vb.)
Yazı Tipi Harika Simgeler
Font Awesome simgelerini kullanmak için
fontawesome.com<head> adresine gidin, oturum açın ve HTML sayfanızın bölümüne eklemek üzere bir kod alın:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Font Awesome 5 eğitimimizde Font Awesome'i kullanmaya başlama hakkında daha fazla bilgi edinin .
Not: İndirme veya kurulum gerekmez!
Ö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>
Sonuç:
Tüm Font Awesome simgelerinin eksiksiz bir referansı için Simge Referansımızı ziyaret edin .
Önyükleme Simgeleri
Bootstrap glifonlarını kullanmak <head>için HTML sayfanızın 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">
Not: İ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ç:
Google Simgeleri
<head>Google simgelerini kullanmak için HTML sayfanızın bölümüne aşağıdaki satırı ekleyin :
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Not: İ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ç:
Tüm simgelerin tam listesi için Simge Eğitimimizi ziyaret edin .