Apa itu Font Awesome?
Font Awesome adalah font ikon yang awalnya dirancang untuk Bootstrap. Ini adalah kumpulan dari beberapa SVG (Scalable Vector Graphic) ikon yang dapat disesuaikan dan digunakan pada halaman Web manapun. Ini adalah ikon dengan compact-size yang ukurannya tidak berat yang berarti mereka mempertahankan integritas ketika ukurannya diperbesar.
Sebagai seorang desainer, ini adalah kit yang berguna untuk dimiliki kerena akan membiarkan Anda membuat desain profesional dan dioptimalkan untuk halaman web Anda.
Font Awesome menawarkan beberapa fitur yang sangat luar biasa yang membuatnya sempurna, yuk kita simak!
- Font Awesome berisi keloksi 369 ikon SVG dari beragam kategori termasuk kontrol navigasi, ikon mata uang, aplikasi web, ikon merek, dan sebagainya.
- Font Awesome sangat ringan dan membuat loading blog terasa cepat dibandingkan dengan gambar CSS. Mereka juga terukur dan dapat diubah menjadi berbagai ukuran tanpa mempengaruhi kualitas.
- Bagian terbaik adalah font ini mudah disesuaikan! Anda dapat menerapkan gaya CSS untuk memodifikasinya sesuai kebutuhan Anda. Anda dapat mengubah ukuran, warna, bayangan, dan segala sesuatu yang biasanya dapat dilakukan dengan CSS.
- Yang terakhir adalah ikon font ini GRATISSS..!!!
Menambahkan ikon Font Awesome di Blogger
Ikuti langkah-langkah berikut ini untuk menambahkan ikon Font Awesome di mana saja di blogger Anda (atau halaman web HTML).
Hubungi External Stylesheet
Buka kode sumber halaman web Anda dan cari bagian <head>. Jika Anda ingin menambahkan ikon ini ke dalam template Anda maka perlu membuka Dashboard Blogger Anda kemudian masuk ke Edit HTML. Setelah Anda menemukan bagian header, copy paste baris berikut ini di bawah kode <head>.
link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Pastikan Anda menyalin link itu (termasuk bagian http://). Di sinilah file Font Awesome CSS disimpan. Anda dapat mendownload ke server Anda sendiri jika Anda memiliki kecepatan yang besar.
Menambahkan Ikon
Anda dapat melihat daftar ikon yang tersedia di situs Font Awesome ini. Pilih ikon Anda sukai dan catat nama CSS Class-nya (misal: fa-home atau fa-arrow-down). Sekarang untuk menggunakan ikon ini, gunakanlah tag <i> seperti ditunjukkan di bawah ini.
<i class="fa fa-home"></i>
Anda dapat mengganti teks yang disorot dengan nama kelas dari setiap ikon yang Anda suka. Misalnya, <i class="fa fa-arrow-down"></ i>. Karena ini adalah tag inline, Anda dapat menggunakannya di dalam tag paragraf, daftar tag, bahkan anchor (<a>) tag, dan sebagainya.
Mengedit Ikon
Anda dapat menerapkan beberapa CSS style untuk sebuah ikon. Hanya mengambil kelasnya dan menulis CSS style yang baru seperti yang ditunjukkan di bawah ini.
.fa-home {
font-size: 32px;
color: #033;
padding: 8px;
border: 1px solid #000;
float:left;
}
Sangat sederhana kan?? :)
Nah, sekarang Anda dapat menciptakan template Anda sendiri dengan ikon-ikon yang menakjupkan. Bahkan Anda akan mendecak kagum dengan karya Anda sendiri. Silahkan Anda praktikkan di depan Dashboard Blogger Anda masing-masing. Pada postingan selanjutnya kami akan membahas cara melakukan kostumisasi pada Font Awesome ini.
Tidak ada komentar:
Posting Komentar