Tolga GönüL : 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>

Tolga GönüL

Font awesome css icon kullanımı

About author: Tolgagnl

2 yorum: