HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css icon ekleme
css ikonlar
css ikonlu menü
css icon
css menüye icon ekleme
css a icon
css icon code
css icon codes
css icon code list
css icon kullanımı
css icon list
css icon position
css icon select option
css icon user
css yes icon
css icons example
css icons list
css icons code
css icons align
css icons menu
css bootstrap social icons
bootstrap icons css file
bootstrap css icons examples
bootstrap css icons list
bootstrap icons css code
css for bootstrap icons
css google material icons
google css icons list
css google material design icons
google icons in css

CSS Icons(Ikon)

CSS Icons(Ikon)

Web Sitenizde icon kullanmak isteyebilirsiniz. Örneğin beğen butonun yanına bir el simgesi yada bir kalp simgesi koymak isteyebilirsiniz. Dosya yüklemek isterseniz de bir dosya simgesi kullanabilirsiniz. Yani icons'ları büyük ölçüde kullanacaksınız. Kullanırken herhangi bir yerden indirmenize gerek yok. Web sitenize entegre ederek bu özelliği kullanabilirsiniz. Bunu da javascript dediğimiz dilden faydalanarak yapıyoruz. Bu dili ileri doğru öğreneceksiniz arkadaşlar ama şuan kullanmak zorundayız.

Üç farklı kütüphaneden sitenize icon setlerini entegre edebilirsiniz. Beni size üçünü de göstereceğim hangisi sitenizin tasarımına uyarsa onu aşağıdaki örneklere bakarak kullanabilirsiniz. Tabi css dilinin özelliklerinden yararlanarak da icons'ların şeklinde boyutunda bulunduğu konumda değişiklikler yapabilirsiniz.

1-Bootstrap Icons

Bootstrap üzerinden gelen icons kütüphanesini kullanacağız bu örneğimizde...

Kullanımı:

Html
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Bazı Bootstrap Icons</p>
<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>
<p>Bazı stili değiştirilmiş Bootstrap Icons</p>
<i class="glyphicon glyphicon-thumbs-up" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-thumbs-up" style="font-size:36px;color:blue"></i>
<i class="glyphicon glyphicon-thumbs-up" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-thumbs-up" style="font-size:60px;color:lightblue;"></i>
</body>
</html>

2-Google Icons

Googe üzerinden gelen icons küpüthanesini kullanacağız bu örneğimizde...

Kullanımı:

Html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">attachment</i>
<i class="material-icons">favorite</i>
<i class="material-icons">computer</i>
<i class="material-icons">cloud</i>
<i class="material-icons">traffic</i>


Paylaş:

Enes KILIÇ
Webmaster