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>