Font ikonlar güzel, ancak her zaman ihtiyaca cevap vermiyor. Bu gibi durumlar için kullanılabilecek iki iyi site: İlki,
http://iconmonstr.com/ basit bir arayüzü var. Bir çok farklı kütüphane içinde arama yapabiliyor. İkincisi,
http://icomoon.io/app/#/select ilk siteden temin edilen ikonlar (svg formatında) buraya import edilerek yeni bir font/ikon paketi yaratılabiliyor.
Bundan sonra yapılması gereken bu yeni fontu tanımlayıp, örneğin font awesome için şuna benzer satırlar eklemek,
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?hkpsig');
src:url('fonts/icomoon.eot?#iefixhkpsig') format('embedded-opentype'),
url('fonts/icomoon.woff?hkpsig') format('woff'),
url('fonts/icomoon.ttf?hkpsig') format('truetype'),
url('fonts/icomoon.svg?hkpsig#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.fa-happy:before {
font-family: 'icomoon';
content: "\e600";
}
Bu
sayede ikon setinizi genişletip kullandığınız kütüphanenin
olanaklarından da mahrum kalmıyorsunuz (fa-rotate yada fa-spin gibi)
Sitenin
bir diğer özelliğiyse bu font paketini sonradan yapılacak değişiklikler
için saklaması. Hatta premium hesap sahiplerine live erişim izni de
veriyor.
<link rel="stylesheet" href="http://i.icomoon.io/public/temp/6dc86787af/paket-adi/style.css">
İşler bu denli kolaylaşmışken, ikon için psd kesip, sprite kastığım zamanlara acıyorum şimdi.
