Font Awesome ile Html İcon Ekleme

Font Awesome ile Html İcon Ekleme

27 Şubat 2018 - HTML İpucu

Merhaba arkadaşlar bu yazımda sizlere Font Awesome ile yazılarınıza, menülerinize vb yerlere html icon eklemeyi anlatmaya çalışacağım. Evet Font Awesome aslında bir yazı tipi bu yazı tipini sitemize entegre (entegre = kurmak) ederek çok basit bir şekilde sitemizin istediğimiz bir yerine istediğimiz iconu ekleyebileceğiz. Sizde html icon nasıl eklenir diye soruyorsanız CSS ve HTML kod bilgisine gerek kalmadan küçük işlemlerle sitenize icon eklemek için aşağıdaki adımları izleyebilirsiniz.

    1. Öncelikle buraya tıklayarak fontumuzu bilgisayara indiriyoruz.
    2. Sonrasında indirdiğimiz dosyayı zipten çıkarıp sitemizin ana dizinine atıyoruz. Ana dizin nedir?
    3. Dosyayı anadizine attıktan sonra aşağıdaki kodu wp panelinizdeki Görünüm -> Düzenle -> Tema üst bölümü kısmındaki <head> etiketinden sonra aşağıdaki kodu ekliyoruz
      <link rel="stylesheet" href="wp-content/themes/yasinergul/fontawesome-free-5.0.6/web-fonts-with-css/css/fontawesome-all.min.css">
      
    4. Kodu ekledikten sonra kaydet diyoruz.

Burada fontu sitemize entegre etmiş olduk pekii gelelim sitemize icon eklemeye;

Siteye Html İcon Ekleme

  1. Sitenize icon eklemek için buraya tıklayarak 2.500’e yakın icondan bir tanesine tıklıyoruz.
  2. Bu alanda “i class” ile başlayan kodu kopyalıyoruz.
  3. Sonra bu kodu iconun görünmesini istediğiniz yere yapıştırıyorsunuz. Html kısmına yapıştırmayı unutmayın. İşte bu kadar sizde benim sitemdeki gibi menülerine icon ekleyebilir yazılarınızda da html icon kullanabilirsiniz.
  4. Örnekler;

İşte bu kadar artık sizde sitenizde sosyal medya iconlarından bir sitede ihtiyaç duyulan tam 2500’e yakın iconu kullanabilirsiniz. HTML ipuçları kategorimize ait “WordPress Whatsapp Paylaş Butonu” yazımda ilginizi çekebilir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.