İçerikler
Projelerinizde kullanacağınız ikonlar için kullanabileceğiniz bir kütüphanedir fontawesome. Bu kütüphane ile font dosyaları ile yada svg ile istediğiniz ikonu kullanabilirsiniz. Bu makalede ikonları nasıl kullanabileceğinizden bahsedeceğim.
FontAwesome kütüphanesini kullanabilmek için ilk olarak burayı tıklatarak dosyaları indirmeniz gerekmektedir. İkonları SVG olarak kullanmak istiyorsanız javascript dosyası ile bu işlemi gerçekleştirebilirsiniz. Eğer Web font ile gerçekleştirmek isterseniz de CSS dosyasını kullanabilirsiniz.
SVG Kullanımı
SVG olarak ikonları kullanmak için JS klasöründe bulunan all.min.js kullanılmalıdır.
<script src="js/all.min.js"></script> <i class="fas fa-user"></i> Kullanıcı Adı <br> <i class="far fa-user"></i> Kullanıcı Adı
Yukarıdaki gibi JS dosyasını dahil ettikten sonra fontAwesome sitesindeki iconun kodunu alıp direkt kullanmaya başlayabilirsiniz. Yukarıda yer alan kodun kullanılmasıyla birlikte aşağıdaki gibi sonuç elde edilecektir.
Basit kullanım sonucunda yukarıdaki gibi bir sonuç elde edilecektir.
Web Font Kullanımı
İkonları Web font olarak kullanmak için CSS dosyasını dahil etmek yeterli olacaktır.
<link rel="stylesheet" href="css/all.min.css"> <i class="fab fa-facebook"></i> / ibrahimcevruk <br> <i class="fab fa-twitter"></i> / ibrahimcevruk <br> <i class="fab fa-youtube"></i> / ibrahimcevrukcom <br> <i class="fab fa-instagram"></i> / ibrahimcevruk <br>
Yukarıdaki gibi CSS dosyasının dahil edilmesiyle birlikte class değerinde belirtilen ikona kolaylıkla ulaşılacaktır. Yukarıda yer alan kodların önizlemesi de aşağıdaki gibidir.
Yukarıdaki gibi istediğiniz ikon değerini yazarak kullanabilirsiniz.
