Bloğumda toplam 12 kategoride yazılmış 316 yazı ve 269 yorum var.

Material Design Icons – MDI ile Sitelerinize Icon Set Nasıl Eklenir

4 sene önce yazıldı, 301 kere okundu. 0

Selam arkadaşlar. Bu yazıda sitelerimizi daha doğrusu arayüzlerimizi hazırlarken Material Design Icon Set’inden faydalanmak hakkında konuşacağız. Daha önce FontAwesome ile ilgili bir yazı yazmıştım, ilgi gördüğü için bir de MDI’den bahsetmeliyiz diye düşündüm. FontAwesome yerine MDI kullanmaya başladım artık projelerimde, size de öneririm. FontAwesome ile ilgili yazıya da buradan ulaşabilirsiniz.

Bilmeyenler için Icon Set Nedir?

İnternet sitelerimiz ya da web projelerimiz için olmazsa olmaz küçük detaylardan biri de ikonlardır. Text kullanarak uzun uzun anlatmak yerine bir printer ikonu koyarız ve tıklandığında yazdırma işlevini göreceğini herkes anlar. Aynı zamanda arayüzü de daha görsel hale getirmiş oluruz. İkon setler de bu işi kolaylaştırmak için hazırlanmış kütüphaneler aslında. Printer ikonu için i taginer mdi-printer yazmanız yetiyor ve bunu yaptığınızda ufak css hareketleri ile botunu, rengini, animasyonunu ve artık daha başka ne fanteziniz varsa uygulayabiliyorsunuz. Bu kütüphaneler eğer çok kullanılan kütüphaneler ise sürekli güncelleniyor ve ihtiyaçlarımızı karşılamaya çalışıyor. Biz de kolayca işimizi halletmekten keyif alıyoruz.

Hadi Başlayalım

Öncelikle Material Design Icons sayfasına buraya tıklayıp bir göz gezdirelim. Siteye girdiğinizde direk anasayfada ikonların listesini göreceksiniz. Hemen üst kısımda da bir “Search” bölümü var, ihtiyacınız olan ikonu ingilizce olarak arayabilir, istediğiniz ikonu ve benzerlerini bulabilirsiniz. 

Getting Started bölümüne geldiğimizde, sağ tarafta hangi platformlar/teknolojiler ile MDI kullanabileceğimizi görüyoruz. Angular, React, VueJS gibi teknolojiler ile kullanmak için çeşitli kılavuzlar bu bölümde mevcutlar ancak biz en basit haliyle, bir Html arayüzde bu ikonseti nasıl kullanacağız ve nasıl ekstralarımız var onu görelim. 

Öncelikle kütüphanemizi çalışmamıza dahil etmemiz gerekiyor. CDN ile uzaktan dahil edebiliriz ya da dosyaları indirip dahil edebiliriz. CDN ile dahil etmek için aşağıdaki kodu head tag’leriniz arasına yapıştırmanız yeterli ancak siteniz yüklenirken bu adrese gidip kütüphaneyi getirmeye çalışırken sitenizi bekleteceğinden bu yöntemi her ne kadar hızlı ve kolay olsa da önermiyorum.

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.2.45/css/materialdesignicons.min.css">

Bu kodu eklediğimizde artık MDI classlarını kullanabilir hale geliyoruz. 

BENZER  Chrome ile Web Sayfasındaki Rengin Kodları

Dosyaları indirip kendi projemizin içine alarak kullanmak için buraya tıklayıp sağ üst köşedeki “Download” butonuna tıklıyoruz. Karşımıza gelen ekranda “Download the Webfont” butonuna tıklayıp zip dosyasını indiriyoruz. İndirdiğimiz dosyaların içerisindeki css ve fonts klasörlerini projemizden erişilebilir -assets klasörümüz gibi- bir yere kopyalamamız gerekiyor. Sonrasında projemizde header kısmında head tag’leri arasında aşağıdaki kodu projemize göre düzenleyerek yapıştırıyoruz.

<link rel="stylesheet" href="projedizini/projeassetsdizini/css/materialdesignicons.min.css">

Bu işlemleri tamamladıktan sonra artık ikon setimizi kullanabilir hale geliyoruz. Şimdi bir kaç örnekle nasıl kullanacağımıza bir göz atalım.

Buraya tıklayarak 5.2.45 sürümüne dahil tüm ikonları listeleyebilirsiniz. Aynı zamanda sayfanın en altına indiğinizde kullanım örneklerini de görebilirsiniz. Yine de biz burada Türkçe olarak aktaralım ve kendi yorumlarımızı yapalım.

Standart bir kullanım için aşağıdaki kodu kullanabilirsiniz;

<span class="mdi mdi-folder-multiple-image"></span> // span ile
<i class="mdi mdi-folder-multiple-image"></i> // i tagi ile

Bir de örnek bir kullanım yapalım, mesela bir listeleme yapıyoruz ve her maddenin solunda ikon kullanacağız;

<ul class="listem">
   <li>
      <a href="#">
         <i class="mdi mdi-check-bold"></i>
         Madde 1 Tamam!
      </a>
   </li>
   <li>
      <a href="#">
         <i class="mdi mdi-check-bold"></i>
         Madde 2 Tamam!
      </a>
   </li>
   <li>
      <a href="#">
         <i class="mdi mdi-check-bold"></i>
         Madde 3 Tamam!
      </a>
   </li>
</ul>

Gördüğümüz üzere kullanımı oldukça basit. Kullanacağımız ikonun ismini bulmak ve yazmak kalıyor sadece bize. Böylelikle hem projelerimizi daha görsel hale getirebiliyoruz hem de vakit kaybetmeden projelerimizde pratik bir şekilde ikonlarımızı kullanabiliyoruz. 

Kullanışlı Özellikler

Bunların haricinde MDI bizlere bazı imkanlar sunmuş. Size, Rotate, Flip, Spin ve Color özelliklerini kullanarak css yazmadan çoğu ihtiyacımızı yine olayın amacına uygun bir şekilde pratik olarak halledebiliyoruz. 

Size: İkonun boyutunu ayarlamamıza izin veriyor. Örneğin “mdi-18px, mdi-24px” gibi classlar ile ikonların boyutunu projemizde nasıl kullanmak istiyorsak o şekilde özelleştirebiliyoruz.

BENZER  Yukarı Yapışan Menü Yapmak

Rotate: İkonu açı değeri vererek döndürmemize imkan sağlıyor. “Hafif şöyle sağa dönse” falan dediğimiz durumlar için yardımcı oluyor. Örneğin “mdi-rotate-45, mdi-rotate-315” gibi classlar ile döndürme işlemini sağlayabiliyoruz.

Flip: Rotate özelliğinin kısaltılmış hali gibi düşünebiliriz. Yatay ya da dikey yönlendirme yapmamıza izin veriyor. Sitesinde yazdığı uyarıya göre hem rotate hem flip özelliğini aynı anda kullanamıyormuşuz ancak ben denemedim. Zaten neden kullanasınız ki? Örneğin “mdi-flip-h, mdi-flip-v” classları ile horizontal ve vertical döndürmeler yapabiliyoruz.

Spin: En sevdiğim özelliklerden birisi. İkonumuza rotate animasyonu ekliyor. Bir yükleniyor efekti hazırlamak istediğinizde bir yıldızı sürekli döndürebilirsiniz ya da artık hangi ikonu döndürmek isterseniz. Örneğin “mdi-spin” classı ile bu işlemi sağlayabiliyoruz.

Color: Renklendirmek olarak aklımıza gelse de aslında sarı mavi turuncu gibi renklerden ziyade açık/koyu gibi seçenekleri bizlere sunan özellik “mdi-light, mdi-inactive, mdi-dark” olarak kullanılıyor. Aynı zamanda “mdi-light mdi-inactive” gibi bir kullanımda da işlevini yerine getiriyor. 

Evet yazımızın sonuna geldik. Bu arada SVG, JS, XAML ya da PNG gibi kullanımları için burayı ziyaret edebilirsiniz. Kütüphaneyi hazırlayanlar bizlere her türlü imkanı vererek Web, Android, iOS, Windows ya da Mac platformlarında işlerimizi kolaylaştırmak için baya uğraşmış ve ortaya güzel bir iş çıkartmışlar. Artık bize de projelerimizde kullanmak kalıyor.

Başka bir yazıda tekrar görüşmek üzere!

Konuyla alakalı bir şeyler yazabilirsin.

MacBook Pro M2 13” İle İkinci Günüm

Merhabalar! Instagram kullanıcı adımı değiştirdikten sonra artık şu blog işine bi el atayım istedim ve yeniden...

1 sene önce. 55 0 Devam Et

Kahramanmaraş Depremi ve Düşüncelerim

Merhaba arkadaşlar. Uzun süredir bir şeyler yazmıyordum, zaten çok nadiren girip bir şeyler yazıp çıkıyorum an...

2 sene önce. 69 0 Devam Et

Asus ROG Strix G513IC 144Hz Dizüstü Bilgisayar ile Yaşadığım Problemler

Öncelikle herkese merhaba! Çok uzun bir süredir bloğum aktif değildi ve artık bişeyler yazmak çizmek için tekra...

2 sene önce. 101 0 Devam Et

Macbook Air 2017’yi Kimlere Tavsiye Edebilirim?

Bir süredir sık sık Macbook Air’i proje işlerinde ve sunumlarda kullanıyorum. Sizlere bu yazımda 2017 model ...

4 sene önce. 150 0 Devam Et

2021’e Girerken Hayata Dair Genel Bir Değerlendirme Yapalım

Merhabalar yeniden! Hemen her yazıya başlarken söylediğim gibi; epeydir bir şeyler yazamıyorum ama yeniden bir şe...

4 sene önce. 132 0 Devam Et

Hakkımda

1994'ün Haziran'ında Beyşehir/Konya'da dünyaya gelmişim. O zamanlar, gerek tombikliğim gerek yeşil gözlülüğüm sebebiyle gören herkes tarafından el üzerinde ( hatta defalarca havaya atılıp tutulma gibi ) tutulmuşum.

Bebekliğim Konya'da bir köyde, çocukluğum İstanbul'da geçti. İstanbul'da başladığım iş hayatına doğduğum yer, Beyşehir'de devam ediyorum.

Uzun yıllar çeşitli firmalarda çalıştıktan sonra 2017’den beri kendi yazılım ve reklam şirketimi kurdum. Geliştirmeye ve değiştirmeye devam ediyoruz.