Memasang Font Awesome Icons Pada Judul Widget

Mad Trik - Beberapa hari yang lalu ada yang bertanya bagaimana cara membuat/memasang font Awesome icons pada judul widget. Supaya dia senang maka lebih cepat lebih baik untuk menuliskan tutorial untuk saudara Fadli Hidayatullah pada komentarnya di artikel tutorial memasang Font Awesome Icons.

buat icon pada widget dengan font awesome gimana gan

Begitu request atau permintaan dari mas Fadli, saya sendiri kurang mengerti maksudnya dengan "buat icon pada widget" tapi mungkin yang dimaksud adalah, membuat ikon pada judul widget. Ya, mudah-mudahan tutorial yang saya berikan ini bisa menolong mas Fadli.

Contoh Font Awesome Icons yang ada pada judul widget.

Caranya cukup mudah, dan ini saya dapat dari template buatan blogger tetangga yang saya lupa siapa namanya. Cara hanya menambahkan CSS pseudo element, seperti :before dan :after. Tapi yang pasti sebelum melakukan ini, pastikan dulu pada template blog kamu sudah terdapat kode Font Awesome yang tutorialnya sudah saya jelaskan di artikel sebelumnya.

Dan ini adalah contoh CSS yang ada di template blog saya ini:

#ContactForm1 h2:before {
font-family: fontawesome;
content: "\f0e0";
margin-right: 10px;
font-size: 15px;
color: #00AFAF;
}

CSS diatas itu cuman contoh, untuk bisa memakainya di template kamu caranya mungkin agak berbeda lagi (ID CSS-nya).

Caranya:

1. Pertama-tama "Inspect elemen (Google Chrome)" dulu blog kamu untuk mencari Id dari widget yang kamu inginkan.
2. Kemudian klik "Select an element in the page to inspect it (Tanda kaca pembesar)" dan hover ke salah satu widget yang kamu punya.

Cari ID widget blog kamu dengan inspect elemen.

3. Setelah ketemu id dari widget yang sudah kamu cari tadi. Kemudian ingat id-nya atau salin ke notepad.
4. Dan setelah itu masuklah ke editor template di akun Blogger yang kamu punya. Masukan CSS yang ada dibawah ini:

#ID-Widget h2:before {
font-family: fontawesome;
content: "\f0e0";
margin-right: 10px;
font-size: 15px;
color: #00AFAF;
}

5. Pada kode CSS #ID-Widget yang sudah saya kasih tanda itu silahkan diganti dengan ID widget yang sudah kamu cari tadi ketika di inspect elemen.
5.1. Untuk CSS content: "/f0e0"; silahkan diganti dengan ikon yang cocok dengan widget kamu, untuk melihat ikon-ikonnya bisa kamu lihat di halaman resmi Font Awesome.
5.2. Untuk CSS color: #00afaf; itu adalah warna untuk ikonnya nanti, silahkan diganti dengan warna favorit kamu.
6. Setelah selesai semua simpan template kamu, dan lihat hasilnya.

Bagaimana hasilnya ? sudah seperti yang ada di blog ini bukan judul widget yang ada di blog kamu ?. Dan jika ada kesulitan silahkan bertanya ke kolom komentar dibawah.

Dan ada sedikit tambahan dari saya untuk memperindah judul widget blog kamu. Hanya tambahkan CSS ini kedalam template blog kamu:

#sidebar h2 {
background:#fff;
color:#333;
font-size:15px;
font-weight:700;
text-transform:uppercase;
margin: 0 0 15px 0;
padding:0;
position:relative;
border-bottom:5px solid #eee;
}

#sidebar h2:after {
content: "";
position: absolute;
right: 0;
width: 25%;
height: 5px;
background: #00AFAF;
bottom: -5px;
}

Simpan templatenya dan lihat hasilnya nanti, jadi lebih mirip dengan judul widget dengan blog ini bukan ?. Untuk selebihnya silahkan berkreasi sendiri. Akhir kata semoga artikel ini bisa membantu pertanyaannya mas Fadli :).