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.
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.
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
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.
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> Home.Hasilnya adalah
HomeContoh lainnya jika ingin memasang ikon , dan dipasang sebelum text Telephone anda bisa memasangnya seperti berikut ini:
<i class="fa fa-phone"></i> TelephoneDan hasilnya adalah seperti berikut ini:
TelephoneDan 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)"
#/ Jangan melakukan SPAM.
#/ Link/URL di kolom komentar otomatis inaktif.
#/ Komentar SARA dan Makian langsung dihapus.
#/ Iklan langsung dihapus