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 <span> gibi).
Aşağıdaki simge kitaplıklarındaki tüm simgeler, CSS ile özelleştirilebilen ölçeklenebilir vektörlerdir (boyut, renk, gölge vb.)
Font Awesome Icons
Font Awesome simgelerini kullanmak için fontawesome.com’a gidin, oturum açın ve HTML sayfanızın <head> bölümüne eklenecek kodu alın:
<script src="https://kit.fontawesome.com/buraya kod geliyor.js" crossorigin="anonymous"></script>Not: İndirme veya kurulum gerekmez!
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<p>Bir Kaç Font Awesome Simgesi:</p>
<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>
<p>Şekillendirilmiş Font Awesome Simgeleri:</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>
Bootstrap Icon
Bootstrap glifonları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">
Not: İndirme veya kurulum gerekmez!
<!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 Icon
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">
Not: İndirme veya kurulum gerekmez!
<!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>
