Font Awesome’yi sanırım duymayan çok az kişi vardır. Font Awesome sayesinde photoshop bilgisi olmadan websitemize dilediğimiz türden ikonları kolaylıkla ekleyebiliyoruz. Aklınıza gelebilecek her türlü ikon çeşidi olmasa da bir websitesi için gerekli olan birçok ikon çeşidi bulunuyor. 230 tane Google+ ikon örneği de aynı amaçla Web tasarımcılara kolaylık olsun diye hazırlanmış. Font Awesome ikonik fontlardan oluşuyor ama bu lis
tedeki ikonların tamamı png formatında hazırlanmış olup Css sprite tekniği ile websayfasına yükleniyor. İki adet png formatıyla hazırlanmış olan bu ikonların bir tane png resmi gri renkli diğer png resim ise renkli olarak hazırlanmış. Mouse ikonların üzerine geldiğinde renk değiştirmelerini sağlıyor buda. İkonların yanında bir de budon olarak kullanma özelliği de var. Her ikon ve buton için ayrı ayrı sınıflar belirlenmiş.
Bir ikon kullanmanız için class=”icon icon1″ ve buton kullanmanız için de class=”icon icon108″ şeklinde elementlere belirli sınıflar eklemeniz gerekiyor. Mouse ile demo sayfasındaki örneklerin üzerinde gezdiğiniz zaman her ikonun sınıfını görebilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js ve stil dosyaları :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <link rel="stylesheet" href="tiptip.css" type="text/css" media="screen"> <script src="jquery.tiptip.js"></script>
Javascript :
<script>
$(document).ready(function() {
// Toggle the dropdown menu's
$(".dropdown .button, .dropdown button").click(function () {
if (!$(this).find('span.toggle').hasClass('active')) {
$('.dropdown-slider').slideUp();
$('span.toggle').removeClass('active');
}
// open selected dropown
$(this).parent().find('.dropdown-slider').slideToggle('fast');
$(this).find('span.toggle').toggleClass('active');
return false;
});
// Launch TipTip tooltip
$('.tiptip a.button, .tiptip button').tipTip();
});
// Close open dropdown slider by clicking elsewhwere on page
$(document).bind('click', function (e) {
if (e.target.id != $('.dropdown').attr('class')) {
$('.dropdown-slider').slideUp();
$('span.toggle').removeClass('active');
}
});
</script>
Body etiketleri arasına eklemeniz içinde bütün ikonları incelemenizi tavsiye ederim. Ayrıca download butonundan indirdiğiniz dosyada hazır kurulu bir halde olan index.html dosyasını da göreceksiniz.
