 |
| Blogger Font Awesome Icons |
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 |
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.
Ümit Hocam sizdeki gaget alanındaki gibi Arka planı siyah yapma nasıl oluyor acaba?
YanıtlaSilGadget başlıklarının CSS kodlarını bulup background kodu eklemelisiniz. background: #111; gibi...
SilBende kategorilerime ekledim biraz önce. Teşekkürler paylaşım için :)
YanıtlaSilRica ederim, teşekkürler yorumunuz için...
Silİkon Yazı ile çok bitişik oluyor. İkon ile yazı arasında nasıl boşluk koyabiliriz. Mesela sizde çok güzel olmuş
YanıtlaSilSpace tuşunu kullanabilirsiniz. Ayrıca bu tür sorular için Adsız olarak yorum yapmanıza gerek yok.
SilTeşekkürler faydalı oldu benim için.
YanıtlaSilRica ederim, umarım faydalı olur.
SilFaydalı bir yazı olmuş.
YanıtlaSilEmeğine sağlık
Teşekkür ederim. Umarım faydalı olur...
SilMeraba 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ıtlaSilhttps://www.blogtecrubem.com/2016/12/bloggerda-alinti-blockquote-kismini-ozellestirme.html
Sil