Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review

Cara Menambahkan Font Cantik ke Blogspot (Font Awesome)

Pernah melihat ada icon cantik berbagai bentuk yang biasanya muncul di bagian menu? Nah itu adalah icon dari Font Awesome. Icon ini bisa didapatkan dari situs fortawesome.github.io/Font-Awesome.

Pemasangan berbagai icon font cantik dari font awesome tersebut bisa menambah semarak blog kita dan mempercantik desain blog juga. Karena icon ini berbasis font jadi lebih menyenangkan dan memudahkan untuk editing attributenya, karena secara CSS, attribute icon berbasis font ini sama dengan CSS di font standart. Sehingga jika icon font ini dipasang menyertai font sebelumnya atau sesudahnya, otomatis mulai dari warna, ukuran, style dll. akan mengikuti.

Penerapan Font di Tukang Toko Online

Pengertian Font Awesome

Secara bebas pengertian Font Awesome sendiri yang Saya ambil dari blog buka-rahasia.blogspot.com adalah merupakan font ikonik dan juga adalah bagian pengembangan dari Bootstrap (Twitter). Ikon-ikon yang digunakan adalah sesuai dengan gambar vektor sehingga mudah diatur sesuai dengan font biasa.

Font Awesome ini memiliki desain yang sangat profesional sehingga bisa menambah elegan tampilan blog. Selain itu, yang paling penting adalah ringan dan koleksi font yang terus bertambah, sehingga alternatif pilihan icon akan semakin banyak. Yang tidak kalah pentingnya, tidak dibutuhkan lagi untuk meng-upload library font sendiri karena kita bisa menggunakan library CDN dari Font Awesome.

Nah, yang jadi pertanyaan sekarang adalah bagaimana cara menerapkannya di blogspot?
Cukup mudah kawan. Berikut ini panduannya, hanya dibutuhkan beberapa langkah dan tidak dibutuhkan pengetahuan bahasa kode yang rumit.

Baca juga panduan menambahkan tombol Smooth Scroll to Top untuk memudahkan navigasi blog.

Menambahkan Link Stylesheet external Font Awesome di Template

Untuk memanggil link stylesheetnya cukup dengan memasang kode berikut ini tepat di atas kode </head> di html template blogspot.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
Ini adalah link stylesheet paling baru dari Font Awesome, jika ada update font baru lagi, anda bisa memantaunya disini, dan menggantinya dengan versi Font Awesome terbaru tersebut.

Memasang Snippet Font Awesome


Setelah link eksternal Font Awesome tersimpan dan terpasang di template anda, selanjutnya adalah memasang snippet ikon yang anda inginkan ke blog.

Caranya cukup mudah, yaitu dengan menyisipkan kode ikon yang bisa anda dapatkan disini fortawesome.github.io/Font-Awesome/icons dan kemudian tinggal menyisipkan ke tempat yang ingin anda pasang ikon tersebut.

Contohnya adalah jika anda ingin menyisipkan ikon pada menu home
Maka pemasangan kode ikon home tsb pada menu Home adalah seperti ini
<i class="fa fa-home"></i>&nbsp;Home.
 Hasilnya adalah

 Home
Contoh lainnya jika ingin memasang ikon , dan dipasang sebelum text Telephone anda bisa memasangnya seperti berikut ini:
<i class="fa fa-phone"></i>&nbsp;Telephone
Dan hasilnya adalah seperti berikut ini:
 Telephone
Dan selanjutnya anda bisa melakukan kreasi dengan berbagai font iconic dari font Awesome tersebut di Blog Anda. Mudah-mudahan bisa menjadikan blog anda tampil lebih menarik dan elegan. Semoga bermanfaat.

Posting Komentar untuk "Cara Menambahkan Font Cantik ke Blogspot (Font Awesome)"