OzzY SuNaR: Font Awesome İconlara Yön Verme

11 Ekim 2014 Cumartesi

Font Awesome İconlara Yön Verme

Font Awesome iconlarına farklı özellikler ekleyerek Blogger sitenizde nasıl kullanılacağına bakacağız şimdi.Font Awesome iconlarına değişik yön vermek,kendi etrafında dönmek gibi bir çok işlem yapılabilir.:Biz bu yazımızda bunların bir kaçının nasıl yapılır onu görcez.

1. İcon boyutlandırma:
İconlara boyut eklemek için kod kalıbına icon large,2x,3x,4x gibi yardımcı ek kodlar eklersek böylece iconların boyutlarını büyütmemize yardımcı olur.
Kırmızı renkli bölümlerde gördüğünüz gibi,mavi renkli bölüme istediğiniz metni ekleyebilirsiniz.

<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>

icon-user
icon-user
icon-user
icon-user

2. İconlara yön verme:
İstediğiniz icona istediğiniz kadar yön vererek kullanabilirsiniz.

<i class=" icon-camera"></i>  normal<br>
<i class=" icon-camera icon-rotate-90"></i>  90 derece <br>
<i class=" icon-camera icon-rotate-180"></i>  180 derece <br>
<i class=" icon-camera icon-rotate-270"></i>  270 derece <br>
<i class=" icon-camera icon-flip-horizontal"></i>  icon-flip-horizontal<br>
<i class=" icon-camera icon-flip-vertical"></i>  icon-flip-vertical

normal
90 derece
180 derece
270 derece
icon-flip-horizontal
icon-flip-vertical

3. İconları döndürme
İconları döndürmek için yapacak olduğunuz işlem şöyledir.

<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>

4. İconlara Link verme
Yazınız içerisine eklemiş olduğunuz icona link atamak için şu şekilde yapınız.

<li><a href="http://etralibela-61.blogspot.com/"><i class=" icon-facebook icon-2x"></i> ornek link 1  </a></li>
<li><a href="http://etralibela-61.blogspot.com/"><i class=" icon-twitter icon-2x"></i> ornek link 2  </a></li>
<li><a href="http://etralibela-61.blogspot.com/"><i class=" icon-google-plus-sign icon-2x"></i> ornek link 3  </a></li>
<li><a href="http://etralibela-61.blogspot.com/"><i class=" icon-phone icon-2x"></i> ornek link 4  </a></li>