Blogger'da gadget başlıklarına Font Awesome ikonları nasıl eklenir?

29 Ocak, 2018
Blogger Font Awesome Icons
Blogger Font Awesome Icons
Blogger (blogspot) bloglarında, gadget (eklenti, widget) başlıklarına Font Awesome ikonları (icons) nasıl eklenir? Font Awesome ikonlarını, simgelerini eklenti başlıklarına nasıl ekleriz?

Font Awesome ikonlarını daha önce duydunuz mu, gördünüz mü bilmiyorum ama web site tasarımlarında sıklıkla kullanılır. Klavye ile yapılamayan sembolleri de görmüşsünüzdür.

☒☢☸☹☻☼☽☾♠♡♢♣♤♥♦♧♩✙✁✎❀✰❁❥❦❧➳

Yukarıya eklediklerim gibi. Yalnız bunların formatı farklı. Dilediğimiz her alan için bu sembolleri kullanamıyoruz. Ama ikon fontu olarak adlandırabileceğimiz Font Awesome'da hemen hemen her konu için sembol bulmak ve bu sembolleri web site tasarımlarında, her alan için kullanmak gayet mümkün. Örneğin gadget başlıklarında ya da menü seçeneklerinde...

Font Awesome ikonları nasıl Blogger'a eklenir?


Font Awesome ikonlarını blogumuzda ya da web sitelerimizde kullanabilmemiz için öncelikle yapmamız gereken bir işlem var, Font Awesome stylesheet kodu. Bu kodu blogumuza eklemeliyiz aksi taktirde semboller görünmeyecektir.

Tema ardından HTML Düzenle seçenekleri ile kodların yer aldığı sayfaya ulaşıyoruz. Burada Ctrl F yardımıyla aşağıdaki kodu buluyoruz.
<head>
ve bu kodun hemen altına
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
kodunu ekliyoruz ve blogumuzu kaydediyoruz.

Bu işlemin ardından artık dilediğimiz alana Font Awesome ikonlarını ekleyebiliriz. Tabi burada benim asıl anlatmak istediğim kısma gelmiş olduk, Gadget başlıklarına Font Awesome ikonları eklemeye.

Gadget başlıklarına Font Awesome ikonları nasıl eklenir?


Yine aynı şekilde Tema ardından HTML Düzenle seçenekleri ile kodların yer aldığı sayfaya ulaşıyoruz. Bu sefer Ctrl F yardımıyla, Font Awesome ikonu eklemek istediğimiz Gadget (eklenti) başlığını aratıyoruz. Örneğin benim blogumda Popüler İçerikler eklentisi için
Blogger Font Awesome Icons
Blogger Font Awesome Icons
arama yaptığımda karşıma yukarıdaki gibi bir görüntü çıkıyor. Bu kodların arasında h2 etiketi arasında yer alan
<data:title/>
kodu, eklentinin başlığını belirtiyor. Bu kodun başına eklediğim
<i class="fa fa-rocket" aria-hidden="true"></i>
kodu ise Font Awesome'ın roket ikonu. Bu şekilde dilediğiniz her eklentinin başlığına dilediğiniz ikonları, sembolleri ekleyebilirsiniz. Peki Font Awesome sembollerinin kodlarına nasıl ulaşırız diye sorarsanız, o da burada.

Konuyla ilgili sorularınız olursa yorum yaparak bildirebilirsiniz. 

12 yorum:

  1. Ümit Hocam sizdeki gaget alanındaki gibi Arka planı siyah yapma nasıl oluyor acaba?

    YanıtlaSil
    Yanıtlar
    1. Gadget başlıklarının CSS kodlarını bulup background kodu eklemelisiniz. background: #111; gibi...

      Sil
  2. Bende kategorilerime ekledim biraz önce. Teşekkürler paylaşım için :)

    YanıtlaSil
  3. İkon Yazı ile çok bitişik oluyor. İkon ile yazı arasında nasıl boşluk koyabiliriz. Mesela sizde çok güzel olmuş

    YanıtlaSil
    Yanıtlar
    1. Space tuşunu kullanabilirsiniz. Ayrıca bu tür sorular için Adsız olarak yorum yapmanıza gerek yok.

      Sil
  4. Teşekkürler faydalı oldu benim için.

    YanıtlaSil
  5. Faydalı bir yazı olmuş.
    Emeğine sağlık

    YanıtlaSil
  6. Meraba abi. Sana bir sorum olacak. Sen kod paylaşımı yaparken kodları nasıl yeşil bi karenin içine alıyon. Alıntı şeysini düzenledim ama seninki gibi olmadı. Böyle kodları nasıl yeşil şeyin içine sokuyon

    YanıtlaSil
    Yanıtlar
    1. https://www.blogtecrubem.com/2016/12/bloggerda-alinti-blockquote-kismini-ozellestirme.html

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın, aksi taktirde yorumunuz silinir.
3. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2016 - 2019 www.blogtecrubem.com · İletişim · Yasal Uyarı