Dalam tutorial cara memasang dan menggunakan font awesome, kita akan mencoba untuk mengenal dan memasang font ini kedalam template kita. Banyak para pengembang web yang menggunakan font ini kedalam proyek mereka, dan sekarang ini Font Awesome terus menambah ikon ikon nya. Apa saja keuntungan dan cara memasangnya?
Keuntungan Menggunakan Font Awesome
Dengan Font Awesome, kita bisa membuat ikon yang menarik dengan hanya menggunakan teks (tanpa gambar) sehingga nantinya bisa meningkatkan kecepatan blog. Dengan menggunakan Font Awesome, tampilan website jadi lebih mudah diakses meskipun teks pada tombol dalam bahasa asing, dan juga membuat kita lebih mudah untuk memahami konten.
Nama Font Awesome menunjukkan bahwa itu adalah font (huruf), sehingga kita dengan mudah mengubah warna dan ukuran dengan bantuan dari skrip CSS. Hal yang paling penting adalah bahwa huruf berbentuk ikon ini bisa terlihat dengan baik pada setiap perangkat (bahkan pada layar retina).
Menggunakan Font Awesome merupakan salah satu usaha untuk merubah tampilan website atau blog menjadi menarik
Cara Memasang Font Awesome ke HTML atau Template
Sebenarnya ada banyak cara memasang dan cara menggunakan Font Awesome pada template kita. Kita akan fokus pada yang paling mudah yaitu dengan menggunakan Bootstrap CDN. Pertama, kita harus mendapatkan link dari Font Awesome dengan mengunjungi alamat ” http://fortawesome.github.io/Font-Awesome/get-started/ ” dan salin link tersebut. Lebih jelasnya perhatikan gambar dibawah.
Selanjutnya, kita perlu menemukan bagian kepala dari situs kita, caranya cari elemen head atau tag
</head> dan tambahkan Script ini <http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css diatas nya.
1
2
3
4
5
6
7
8
|
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
|
Penerapan
Demikian tutorial cara memasang dan menggunakan font awesome, Perlu untuk diketahui jika pada versi sebelumnya (versi 3.2.1), Font Awesome mengalami perubahan pada kode pemanggilan ikon dan juga pada link dari Netdna menjadi MaxCDN, untuk itu sebelum memutuskan untuk update ikon, kita harus mempelajari lagi bagaimana cara pengambilan link dan pemanggilan ikon tersebut. Semoga Bermanfaat :)
0 comments:
Post a Comment