Cara Menggunakan Font Awesome Icons
Font Awesome Icons adalah merupakan sebuah perpustakaan icon font yang keren-keren. Dan saat ini sudah banyak digunakan pada kebanyakan situs-situs terkhusus pada tema atau template premium. Dengan menggunakan font awesome icons ini akan lebih memudahkan kita dalam hal terlalu banyaknya penggunaan kode-kode HTML "style markup".
Kita sepakat, bahwa tanpa icon-icon rasanya keindahan sebuah website belumlah lengkap. Selain itu tanpa icon, kita juga akan dipaksa untuk hanya menggunakan teks untuk menggambarkan secara antarmuka "interface". Nah, jika tahun-tahun 2000-an penggunaan icon pada sebuah website didominasi atau diwakilkan dengan gambar berformat .png atau juga .jpg dll tapi dengan menggunakan "font awesome icons" maka gambar-gambar .png tadi tak lagi kita perlukan. Eet bukan berarti semuanya ini hanya opsi yang mungkinlayak anda gunakan.
Anda pasti telah mengenal dengan "icon emotions" yang kalau kita tampilkan dengan menggunakan kode-kode tertentu, ya.. seperti itu sama tapi tak serupa.
Dibawah ini contoh hasil tampilan penggunaan
Mungkin kita asumsikan saja, bahwa nama "FontAwesome icons" itu adalah font, sehingga Anda dapat dengan mudah mengubah warna, ukuran dengan sedikit bantuan dari kode CSS. Sehingga vektor ikon yang terwakilkan dari font, akan terlihat baik dan sempurna pada setiap perangkat (bahkan pada layar retina sekalipun).
Bagaimana saya mendapatkan Font Awesome icons?
Untuk menggunakannya, anda tidak mutlak harus memiliki file paketannya, tapi hanya dengan menggunakan kode-kode HTML dan CSS, tetapi jika anda ingin mendapatkannya anda bisa mengunduhnya secara gratis. ( link unduh pada akhir artikel ini)
Bagaimana mengetahui webiste atau blog telah menggunakan font awesome fonts ini ?
Jika anda ingin mengetahui apakah blog anda sudah teraplikasi dengan penggunaan ini, anda bisa mencarinya dengan keyword pada template blog anda :
Jika anda menemukannya, selamat blog anda sudah mendukung font awesome icons. Tinggal anda memaksimalkan penggunaannya saja. Namun, jika anda tidak menemukannya berarti blog anda memang belum menggunakannya.
Lalu Bagaimana cara menambahkan dan menggunakan Font Awesome icons ?
Baiklah, bagi anda yang ingin mengetahui lebih lanjut tentang penggunaannya, yang perlu anda perhatikan adalah harap backup dulu template blog anda. Karena walaupun sebagian orang mengatakan bahwa penggunaannya sangat mudah namun tidak sedikit pula yang mengalami kesulitan bahkan mengakibatkan hancurnya settingan template blog.
Ok, sebenarnya ada banyak cara untuk menambahkan FontAwesome kedalam tema atau template blog. Tapi disini saya akan fokus pada yang paling mudah, disini saya akan menggunakan dari Bootstrap CDN.
Pertama, Anda harus memasang link kode sumber eksternal pada bagian head website Anda, Taruh kode diantara
Secara default untuk menggunakannya atau untuk menyertakan sebuah fonts icon ke situs web Anda adalah dengan menambahkan tag
Aplikasinya seperti dibawah ini, jika kode :
Maka ikon
Atau, jika ingin menambahkan ukuran icon :
Aplikasi kodenya seperti dibawah ini :
Maka ikon
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Jika anda ingin memberikan link terhadap ikon yang anda pasang, bisa menggunakan kode dibawah ini :
Hasilnya :
ini memiliki link
Link teks "
Agar hasil yang lebih maksimal, maka rubah menjadi:
Hasilnya seperti ini, akan lebih sesuai:
ini memiliki link
Hasilnya seperti ini, hanya muncul ikon kotak yang menandakan kesalahan pengkodean :
ini memiliki link
Selain itu juga anda bisa menggunakan Icon Animasi dengan menambahkan kode
Hasilnya
Pada saat ini saya belum menemukan kelemahan dengan menggunakan metoda atau cara ini, tapi mungkin ada sesuatu yang masih belum saya ketahui. Jika Anda mengetahui setiap masalah atau jika Anda tahu cara yang lebih baik, maka silahkan beritahu saya melalui kotak komentar!
Unduh : Font Awesome Icons disini
Bagaimana cara menggunakannya? Baca: Cara Menggunakan Font Awesome di Adobe Photoshop
Demikian sekilar artikel cara menggunakan Font Awesome Icons terbaru 2016, semoga bermanfaat.
Kita sepakat, bahwa tanpa icon-icon rasanya keindahan sebuah website belumlah lengkap. Selain itu tanpa icon, kita juga akan dipaksa untuk hanya menggunakan teks untuk menggambarkan secara antarmuka "interface". Nah, jika tahun-tahun 2000-an penggunaan icon pada sebuah website didominasi atau diwakilkan dengan gambar berformat .png atau juga .jpg dll tapi dengan menggunakan "font awesome icons" maka gambar-gambar .png tadi tak lagi kita perlukan. Eet bukan berarti semuanya ini hanya opsi yang mungkinlayak anda gunakan.
Baca Juga : Cara Menggunakan Google Font
Anda pasti telah mengenal dengan "icon emotions" yang kalau kita tampilkan dengan menggunakan kode-kode tertentu, ya.. seperti itu sama tapi tak serupa.
Dibawah ini contoh hasil tampilan penggunaan
font awesome icons : Catatan!
Sebagai penegasan saja, bahwa icon-icon diatas bukan icon yang dihasilkan dari gambar berformat .png tapi adalah dari font awesome icon.
Sebagai penegasan saja, bahwa icon-icon diatas bukan icon yang dihasilkan dari gambar berformat .png tapi adalah dari font awesome icon.
Mungkin kita asumsikan saja, bahwa nama "FontAwesome icons" itu adalah font, sehingga Anda dapat dengan mudah mengubah warna, ukuran dengan sedikit bantuan dari kode CSS. Sehingga vektor ikon yang terwakilkan dari font, akan terlihat baik dan sempurna pada setiap perangkat (bahkan pada layar retina sekalipun).
Bagaimana saya mendapatkan Font Awesome icons?
Untuk menggunakannya, anda tidak mutlak harus memiliki file paketannya, tapi hanya dengan menggunakan kode-kode HTML dan CSS, tetapi jika anda ingin mendapatkannya anda bisa mengunduhnya secara gratis. ( link unduh pada akhir artikel ini)
Bagaimana mengetahui webiste atau blog telah menggunakan font awesome fonts ini ?
Jika anda ingin mengetahui apakah blog anda sudah teraplikasi dengan penggunaan ini, anda bisa mencarinya dengan keyword pada template blog anda :
fa
fa fa-Jika anda menemukannya, selamat blog anda sudah mendukung font awesome icons. Tinggal anda memaksimalkan penggunaannya saja. Namun, jika anda tidak menemukannya berarti blog anda memang belum menggunakannya.
Lalu Bagaimana cara menambahkan dan menggunakan Font Awesome icons ?
Baiklah, bagi anda yang ingin mengetahui lebih lanjut tentang penggunaannya, yang perlu anda perhatikan adalah harap backup dulu template blog anda. Karena walaupun sebagian orang mengatakan bahwa penggunaannya sangat mudah namun tidak sedikit pula yang mengalami kesulitan bahkan mengakibatkan hancurnya settingan template blog.
Ok, sebenarnya ada banyak cara untuk menambahkan FontAwesome kedalam tema atau template blog. Tapi disini saya akan fokus pada yang paling mudah, disini saya akan menggunakan dari Bootstrap CDN.
Pertama, Anda harus memasang link kode sumber eksternal pada bagian head website Anda, Taruh kode diantara
<head> dan </head> contoh terlihat dibawah ini :<head>
.................
.................
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
.................
.................
</head>Secara default untuk menggunakannya atau untuk menyertakan sebuah fonts icon ke situs web Anda adalah dengan menambahkan tag
<i> ke dalam kode HTML Anda, seperti ini: <i class="fa fa-kode-icon"></i>Aplikasinya seperti dibawah ini, jika kode :
<i class="fa fa-car"></i>Maka ikon
fa-car akan menghasilkan "rendered" menjadi:Atau, jika ingin menambahkan ukuran icon :
<i class="fa fa-kode-icon fa-lg"></i>
<i class="fa fa-kode-icon fa-2x"></i>
<i class="fa fa-kode-icon fa-3x"></i>
<i class="fa fa-kode-icon fa-4x"></i>
<i class="fa fa-kode-icon fa-5x"></i>Aplikasi kodenya seperti dibawah ini :
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>Maka ikon
fa-car fa- akan menghasilkan "rendered" menjadi:fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Jika anda ingin memberikan link terhadap ikon yang anda pasang, bisa menggunakan kode dibawah ini :
<a class="fa fa-car" href="#"> ini memiliki link </a>Hasilnya :
ini memiliki link
Link teks "
ini memiliki link" diatas akan memberikan hasil yang tidak sama dengan jenis font yang ada pada template. Karena struktur pengkodeannya diluar/tidak ada di CSS di template anda.Agar hasil yang lebih maksimal, maka rubah menjadi:
<a><i class="fa fa-car" href="#"></i> ini memiliki link </a>Hasilnya seperti ini, akan lebih sesuai:
ini memiliki link
Ingat!
Silahkan ubah (modifikasi) penggunan kode diatas, tapi penggunaan kode
Contoh Kesalahan pengkodean :Silahkan ubah (modifikasi) penggunan kode diatas, tapi penggunaan kode
class=fa fa-... harus (wajib) ada dalam satu struktur kode yang dimaksud.<a><i class="fa-car" href="#"></i> ini memiliki link </a>Hasilnya seperti ini, hanya muncul ikon kotak yang menandakan kesalahan pengkodean :
ini memiliki link
Selain itu juga anda bisa menggunakan Icon Animasi dengan menambahkan kode
fa-spin :<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-car fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>Hasilnya
Catatan!
KESIMPULAN :- Pada beberapa browser di beberapa platform memiliki masalah dengan ikon animasi yang menghasilkan efek bergoyang-goyang "jittery".
- Untuk CSS3, animasi belum mensupported pada IE8 - IE9.
- Contoh-contoh lebih lanjut bisa merujuk ke halaman ini dan koleksi ikon di halaman ini.
Pada saat ini saya belum menemukan kelemahan dengan menggunakan metoda atau cara ini, tapi mungkin ada sesuatu yang masih belum saya ketahui. Jika Anda mengetahui setiap masalah atau jika Anda tahu cara yang lebih baik, maka silahkan beritahu saya melalui kotak komentar!
Unduh : Font Awesome Icons disini
Bagaimana cara menggunakannya? Baca: Cara Menggunakan Font Awesome di Adobe Photoshop
Demikian sekilar artikel cara menggunakan Font Awesome Icons terbaru 2016, semoga bermanfaat.
No comments