Sign In

 

 

İkon Font Kütüphaneleri Oluşturmakİkon Font Kütüphaneleri Oluşturmak2492016-11-22T15:30:00Z 22.11.2016 15:30:00Sinan Bozkuş<div class="ExternalClass5BD3A99A11614D15991A6CFAA69D5D0D"><p>​Günümüzde popüler olarak kullanılan <strong>Font Awesome</strong>, <strong>Glyphicons</strong> kütüphaneleri gibi birçok font tabanlı ikon kütüphanesi vardır. Siz de kendi hazırladığınız ya da internetten edindiğiniz ikonları fonta çevirerek bir kütüphane oluşturabilir, paket halinde kullanabilirsiniz. İkonlarınızı font haline (yazı tipine) çevirmek için <a href="https://icomoon.io/" target="_blank" style="text-decoration:underline;"><span class="ms-rteForeColor-8" style="text-decoration:underline;">IcoMoon</span></a>, <a href="http://fontello.com/" target="_blank" style="text-decoration:underline;"><span class="ms-rteForeColor-8" style="text-decoration:underline;">Fontello</span></a>, <a href="http://fontastic.me/" target="_blank" style="text-decoration:underline;"><span class="ms-rteForeColor-8" style="text-decoration:underline;">Fontastic</span></a>, <a href="https://glyphter.com/" target="_blank" style="text-decoration:underline;"><span class="ms-rteForeColor-8" style="text-decoration:underline;">Glyphter</span></a> gibi servislerden birini tercih edebilirsiniz. Bu yazıda <strong>IcoMoon</strong> servisini kullanarak kendi fontumuzu oluşturacağız. İhtiyacınız olan en önemli şey <strong>.SVG</strong> uzantılı vektör ikonlar. Bu ikonları internetten edinebilir, Illustrator vb. vektörel bir çizim programı ile de oluşturabilirsiniz.</p><p> <strong>IcoMoon Kullanarak Font Oluşturmak</strong></p><p> <a href="https://icomoon.io/app" target="_blank" style="text-decoration:underline;"> <span class="ms-rteForeColor-8" style="text-decoration:underline;">https://icomoon.io/app</span></a> adresinden uygulamayı açıyoruz.</p><p> <img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-1.png" alt="ikon-font-1.png" style="margin:5px;" />  </p><p>​<strong>Import Icons</strong>'a tıklayarak .svg uzantılı ikonlarımızı tek seferde yükleyebiliriz.</p><p>​<img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-2.png" alt="ikon-font-2.png" style="margin:5px;" /><br></p><p>​Yükleme sonrası yeni bir ikon seti oluşacaktır, "<strong>Untitled Set</strong>" yazan bölümü değiştirerek oluşturduğumuz ikon setine bir isim verebiliriz.<br></p><p> <img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-3.png" alt="ikon-font-3.png" style="margin:5px;" /> <br> </p><p>Oluşturacağımız Font'ta kullanmak istediğimiz ikonları seçiyoruz. İstersek oluşturacağımız bu font'a kendi ikonlarımız dışında IcoMoon ikonlarından da dahil edebiliriz. Yüklediğiniz tüm ikonları hızlıca seçebilmek için ikon setinin sağ tarafındaki menüden "Select All" a tıklayabilirsiniz.</p><p> <img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-4.png" alt="ikon-font-4.png" style="margin:5px;" /> <br> </p><p>İkon seçimlerimizi yaptıktan sonra <strong>Generate Font</strong>'a tıklayarak Font oluşturma işlemimizi tamamlıyoruz.</p><p> <img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-5.png" alt="ikon-font-5.png" style="margin:5px;" /> <br> </p><p>Açılan sayfada ikonlarımızı hangi css class'ı ile çağırmak istediğimizi tanımlıyoruz. Eğer bir tanımlama yapmak istemiyorsanız varsayılan değerleri ile bırakabilirsiniz. Yukarıdaki örnekte olduğu şekilde ev ikonunu kullanmak istiyorsak <strong><i class="icon-home"></i></strong> şeklinde bir html kodu kullanmamız gerekecek.</p><p> <img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-6.png" alt="ikon-font-6.png" style="margin:5px;" /> <br> </p><p>Eğer bilgisayarımıza indirmeden oluşturduğumuz font'u hızlı bir şekilde test etmek istiyorsak "<strong>Enable Quick Usage</strong>" a tıklayarak bizim için bir link üretmesini sağlıyoruz. Bu link 24 saat boyunca geçici olarak kullanıma açık olacak ve sürenin bitiminde silinecektir. IcoMoon'un sunduğu kalıcı CDN hizmetinden yararlanmak istiyorsanız Premium satın almanız gerekmektedir.</p><p> <img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-7.png" alt="ikon-font-7.png" style="margin:5px;" /> <br> </p><p>Ekranın sağ alt köşesinde bulunan "<strong>Font Download</strong>" linkine tıklayarak fontumuzu indiriyoruz.</p><p> <img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-8.png" alt="ikon-font-8.png" style="margin:5px;" /> <br> </p><p>İndirdiğimiz zip dosyası içerisinden <strong>demo.html</strong>'i açıyoruz.</p><p> <img src="/blog/PublishingImages/Lists/Posts/AllPosts/ikon-font-9.png" alt="ikon-font-9.png" style="margin:5px;" /> <br> </p><p>Oluşturduğumuz ikon ve kullanacağımız class isimleri bu sayfada yer alıyor. <strong>Font Test Drive</strong> bölümünden ikon kullanımlarını test edebilirsiniz.</p><p>Web sitenizde / uygulamanızda kullanmak için gereken kodları/dosyaları indirdiğiniz .zip dosyasının içerisinden alabilirsiniz. <strong>Font klasörünü </strong>ve <strong>style.css </strong>içerisindeki css kodlarını almanız yeterli olacaktır. Mevcut ikon kütüphanenizi geliştirmeye devam etmek isterseniz IcoMoon uygulamasına girdikten sonra <strong>Import Icons</strong>'a tıklayıp indirdiğimiz .zip dosyası içerisindeki <strong>selection.json</strong>'ı yükleyerek kütüphanenizi kaldığınız yerden geliştirmeye devam edebilirsiniz.</p></div>ikon-font-kutuphaneleri-olusturmakhttps://www.bilgeadam.com/blog/Lists/Photos/PostImages/ikonlardan-font-olusturmak.pngKendi hazırladığınız ya da internetten edindiğiniz ikonları fonta çevirerek, bir kütüphane oluşturabilir ve paket halinde kullanabilirsiniz. bluePRO

Yazara Soru Sor




SORU GÖNDER