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. Murat Cenk29 Ocak, 2018 15:41

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

    YanıtlaSil
    Yanıtlar
    1. Blog Tecrübem29 Ocak, 2018 16:43

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

      Sil
  2. Mustafa29 Ocak, 2018 19:53

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

    YanıtlaSil
    Yanıtlar
    1. Blog Tecrübem29 Ocak, 2018 22:32

      Rica ederim, teşekkürler yorumunuz için...

      Sil
  3. Adsız29 Ocak, 2018 22:13

    İ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. Blog Tecrübem29 Ocak, 2018 22:33

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

      Sil
  4. Adsız30 Ocak, 2018 19:15

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

    YanıtlaSil
    Yanıtlar
    1. Blog Tecrübem30 Ocak, 2018 22:38

      Rica ederim, umarım faydalı olur.

      Sil
  5. incidennotlar03 Şubat, 2018 18:06

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

    YanıtlaSil
    Yanıtlar
    1. Blog Tecrübem03 Şubat, 2018 23:48

      Teşekkür ederim. Umarım faydalı olur...

      Sil
  6. Sessiz Kurt22 Haziran, 2019 10:45

    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. Blog Tecrübem23 Haziran, 2019 03:36

      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. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
3. Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanın.

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.