Font awesome css icon kullanımı
Font awasome bir çok sitede kullanılan bir özelliktir css ile icon oluşturmak için kullanılıyor. Sitenizde linklere css ile icon ekliyebiliyorsunuz Bir örneğini bizde uyguladık font awasome iconlarını kullanarak bir katagori ve 468x60 reklam alanlı oluşturduk slider altında vede sidebar kısmında katagori kısımlarından görebilirsiniz
Bu iconları menülerinizede ekliyebilirsiniz. kullanımı çok basit olan bir uygulama sitenizede görsel anlamda farklılık katabiliryor.
Font awasome iconlarını nasıl kullanırız kısaca anlatalım.
1. Öncelikle iconları çağırmamız için <head> kodunun altına şu linki eklememiz gerekiyor.
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
2.Sonra iconların işlevselliğini sağlamak için ]]></b:skin> bu kodu bulup hemen üzerine aşağıdaki css kodunu ekliyoruz.
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}
3. Linklerin kullanımı için ise Burdaki siteye girerek iconlara tıklayarak icon kodlarını alıp linklerinizde iconları oluşturabilirsiniz.
Siteye girdiğiniz zaman zaten ekliyeceğiniz kodlar karşınıza çıkıyor siz sadece link oluşturuyorsunuz.
icon boyutlandırma
icon-user
icon-user
icon-user
icon-user
iconların kullanımı aşağıdadır.
<p><i class=" icon-user icon-large"></i> icon-user</p> <p><i class=" icon-user icon-2x"></i> icon-user</p> <p><i class=" icon-user icon-3x"></i> icon-user</p> <p><i class=" icon-user icon-4x"></i> icon-user</p>iconlara yön verme
normal
icon-rotate-90
icon-rotate-180
icon-rotate-270
icon-flip-horizontal
icon-flip-vertical
iconların kullanımı
<i class=" icon-user"></i> normal<br> <i class=" icon-user icon-rotate-90"></i> 90 derece <br> <i class=" icon-user icon-rotate-180"></i> 180 derece <br> <i class=" icon-user icon-rotate-270"></i> 270 derece <br> <i class=" icon-user icon-flip-horizontal"></i> icon-flip-horizontal<br> <i class=" icon-user icon-flip-vertical"></i> icon-flip-vertical
iconları döndürme
iconların Kullanımı
<p><i class=" icon-user icon-2x icon-spin"></i></p> <p><i class=" icon-user icon-3x icon-spin"></i></p> <p><i class=" icon-user icon-4x icon-spin"></i></p>
örnek linkler
Kullanımı bu şekildedir.
<li><a href="http://www.tolgagonul.net/"><i class=" icon-user icon-2x"></i> ornek link 1 </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-heart icon-2x"></i> ornek link 2 </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-rss icon-2x"></i> ornek link 3 </a></li> <li><a href="http://www.tolgagonul.net/"><i class=" icon-phone icon-2x"></i> ornek link 4 </a></li>
Etiketler: css icon, Css ve Html, Font awesome, Fontlar, Yazı Fontları
2 Yorum:
merhabalar
awesome ccs dosyaları template içersinde mevcut modül pozisyonlarında görünüyor buraya kadar sorun yok..ancak ben bir türlü o modüldeki fontu değiştiremedim nasıl bir yol izlemem gerekiyor..
o modül deki fontu derken siz iconumu değiştiremediniz iconları değiştirmek için http://fontawesome.info/font-awesome-icon-world-map/ burdaki adresdeki iconlara tıklıyarak icon kodlarını alıp link olarak ekliyebilirsiniz yukarda örnek oluşturmuştum zaten
Yorum Gönder
Kaydol: Kayıt Yorumları [Atom]
<< Ana Sayfa