Material Design Iconları

Vatanay Özbeyli Diğer Konular & İpuçları

google-material-designMaterial Design ile birlikte kullanılan iconlar “Material Design Iconic Font” isimli proje altında bir araya getirildi. Toplamda 744 adet icon vektörel formatta, web tasarımında kullanabileceğiniz şekilde sizleri beklemekte. Diğer popüler icon setleri Glyphicon ve Font Awesome’dan farklı bir ruha sahip bu icon tasarımları günden güne daha da popülerleşecek gibi.

Sergey Kupletsky tarafından hazırlanan bu icon setini ücretsiz bir şekilde kullanabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl kullanılır?

Material Design Iconic Font v1.0.1’i aşağıdaki bağlantıyı tıklayarak indirebilirsiniz.


DOSYAYI İNDİR

ZIP dosyası içerisinden çıkan css ve fonts klasörlerini web sayfanızın dizini içerisine atın. Daha sonra da web sitenizin <head></head> tanımları arasına aşağıdaki kodu ekleyin.

<link rel="stylesheet" href="css/material-design-iconic-font.min.css">

Artık kullanıma hazır!

Örnek

Bir çiçek iconu ekleyerek başlayalım

md-icon-1

<i class="md md-local-florist"></i>

Çiçeği farklı boyutlarda tekrar ekrana yazdıralım.

md-icon-2

<i class="md-local-florist md-lg"></i> md-lg
<i class="md-local-florist md-2x"></i> md-2x
<i class="md-local-florist md-3x"></i> md-3x
<i class="md-local-florist md-4x"></i> md-4x
<i class="md-local-florist md-5x"></i> md-5x

Spinner (yükleniyor) yapıları için dönen animasyonlar oluşturalım.

md-icon-3

<i class="md md-rotate-right md-spin"></i>
<i class="md md-settings md-spin"></i>
<i class="md md-rotate-left md-spin-reverse"></i>
<i class="md md-replay md-spin-reverse"></i>
<i class="md md-loop md-spin-reverse"></i>

İconlara takla attıralım veya çevirelim.

md-icon-4

<i class="md md-invert-colors"></i> normal<br>
<i class="md md-invert-colors md-rotate-90"></i> md-rotate-90<br>