Google’den Materyal tasarım için ikon güncellemesi geldi 2.2 90

Google’den Materyal tasarım için ikon güncellemesi geldi 2.2

Google yaptığı güncelleme ile birlikte 900’den fazla ikonu barındırdığı materyal tasarım ikon paketine 41 tane yeni ikon ekledi.

Google or on GitHub.

Yeni ikonlara göz atmak için, paket hakkında daha detaylı bilgiye göz atmak için tıklayın.

Material-icons-Google-Design-e1455074393667

Materyal İkon Nedir?

Materyal tasarım simgeleri modern, basit ve minimal tasarım ilkeleri göz önünde tutularak oluşturulmuştur. Hem büyük hem de küçük boyutlarda okunabilirliği ve netliğinin bozulmaması materyal ikonlarını cazip hale getiren en önemli unsur. Bu simgeler tüm ortak platformları ve ekran çözünürlüklere uygun olarak optimize edilmiştir.

Nasıl İndiririm?

Materyal tasarım ikonlarını aşağıdan indirebilirsiniz. (60mb)

İndir

Web Font aracılığıyla kullanımı

Bu ikonları herhangi bir web sayfasında kullanmanın en kolay yolu Google Web Fonts’dan geçer. Kullanmak için yapmanız gereken tek şey ufak bir HTML  kodu eklemeniz.

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

Web Kullanım – Kendi Sunucunda Barındırma

Arkadaş ben Google’dan da olsa başka sunucudan içerik çekmek istemiyorum diyorsanız bu kurulum tam sizlik. Ekleyeceğiz CSS kodlarıyla fontu kendi sunucunuzda barındırıp kullanabilirsiniz.

[box type=”alert-info”]URL’leri düzenlemeyi unutmayın.[/box]

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

Buna ek olarak material-icons olarak çağıracağımız class’a fontu tanımamız gerekmektedir.

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

HTML Kullanımı

Font çağırma işlemini yaptınız şimdi sırada fontu yani ikonları web sayfamızda kullanmakta.

materyal-ikon

Örnek Kullanım

https://design.google.com/icons/#ic_done

<!– Modern browserlar için –>

<i class=”material-icons”>done</i>

<!– For IE9 or below. –>

<i class=”material-icons”>&#xE876;</i>

Bir Cevap Yaz

Uckan

1995 doğumlu, balıkesirde yaşayan Fenerbahçeli kendi halinde bir yazar..