Sabtu, 10 Agustus 2024
Hello sobat Nirwana Blog, kali ini kita akan sedikit mengulik cara menggunakan font awesome. Apakah itu? Font Awesome adalah jenis font yang berbentuk gambar atau icon yang digunakan untuk mempercatik tampilan blog atau website, Font awesome sendiri memiliki banyak versi, ada yang lama dan ada yang terbaru. Yang membedakan yang lama dengan yang baru adalah untuk versi terbaru biasanya ada penambahan ikon-ikon unik dan menarik.
Kelebihan Icon Font Awesome
- Ringan, bisa mempercepat loading blog karena biasanya yang digunakan adalah image atau gambar ikon.
- Gratis alias Free , bisa digunakan untuk komersial maupun non komersial.
- Icon akan terlihat sempurna di dalam ukuran font berapapun.
- Mudah untuk diberikan Style CSS dan bisa di warnai.
- Compatible dengan Bootsrap 3.0.0.
- Support dengan Browser lama.
Cara Menggunakan Icon Font Awesome ada 2 cara :
- Dengan Menggunakan Icon Font awesome didalam HTML.
- Dengan Menggunakan Icon Font awesome didalam CSS.
Agar bisa menggunakan Icon Font Awesome, maka anda perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas kode
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>1. Cara Menggunakan Icon Font Awesome didalam HTML
Dalam penggunaan didalam Html anda perlu menambahkan kode
fa fa-home
<i class="fa fa-home"></i> fa fa-homeCara mengatur ukuran Icon Font Awesome
Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class| fa-home | fa-home | fa-lg |
| fa-home | fa-home | fa-2x |
| fa-home | fa-home | fa-3x |
| fa-home | fa-home | fa-4x |
| fa-home | fa-home | fa-5x |
<i class="fa fa-home fa-lg"></i> fa-home
<i class="fa fa-home fa-2x"></i> fa-home
<i class="fa fa-home fa-3x"></i> fa-home
<i class="fa fa-home fa-4x"></i> fa-home
<i class="fa fa-home fa-5x"></i> fa-homeCara mengatur letak posisi dan menambahkan border (garis tepi) Icon Font Awesome
Untuk mengatur letak posisi Font Awesome gunakan class| fa-home | letak Icon sebelah kiri menggunakan pull-left |
| fa-home | letak Icon sebelah kanan menggunakan pull-right |
| fa-home | Menambahkan border atau garis tepi menggunakan fa-border |
<i class="fa fa-home pull-left"></i> fa-home
<i class="fa fa-home pull-right"></i> fa-home
<i class="fa fa-home fa-border"></i> fa-homeCara membuat daftar/ list style Icon Font Awesome
Untuk mengatur list style atau membuat daftar Font Awesome gunakan Class fa-ul dan fa-li dan menentukan nama Icon.
- fa-check
- fa-arrow-right
- fa-angle-double-right
- fa-tag
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>fa-check</li>
<li><i class="fa-li fa fa-arrow-right"></i> fa-arrow-right</li>
<li><i class="fa-li fa fa-angle-double-right "></i>fa-angle-double-right </li>
<li><i class="fa-li fa fa-tag"></i>fa-tag</li>
</ul>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>fa-check</li>
<li><i class="fa-li fa fa-arrow-right"></i> fa-arrow-right</li>
<li><i class="fa-li fa fa-angle-double-right "></i>fa-angle-double-right </li>
<li><i class="fa-li fa fa-tag"></i>fa-tag</li>
</ul>Cara mengatur Rotasi Icon Font Awesome
Untuk mengatur rotasi atau memutar Icon Font Awesome gunakan class| normal | Gambar Icon dalam posisi normal |
| fa-rotate-90 | Icon di rotate atau diputar 90 derajat |
| fa-rotate-180 | Gambar Icon di rotate atau diputar 180 derajat |
| fa-rotate-270 | Gambar Icon di rotate atau diputar 270 derajat |
| fa-flip-horizontal | Gambar Icon di balik arah horisontal |
| icon-flip-vertical | Gambar Icon di balik arah vertical |
<i class="fa fa-shield"></i> normal
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-verticalCara membuat Icon Font Awesome menjadi Animasi
Untuk membuat Icon Font Awesome bisa seperti animasi atau bergerak memutar gunakan class| fa-spinner |
| fa-refresh |
| fa-cog |
| fa-asterisk |
| fa-star |
<i class="fa fa-spinner fa-spin"></i> fa-spinner
<i class="fa fa-refresh fa-spin"></i> fa-refresh
<i class="fa fa-cog fa-spin"></i> fa-cog
<i class="fa fa-asterisk fa-spin"></i> fa-asterisk
<i class="fa fa-star fa-spin"></i> fa-star2. Cara Menggunakan Icon Font Awesome didalam CSS
Dalam penggunaan Icon Font Awesome didalam CSS anda perlu menambahkan Elemen Pseudosebagai contoh saya akan membuat Info Box sederhana dengan element pseudo
Cara penulisan dari contoh diatas :
.slideseo-box{background:#0089E0;color:#fff;position:relative;padding:10px 40px}
.slideseo-box:before{
content: "\f164";
font-family: FontAwesome;
color: #333;
font-size: 20px;
position: absolute;
top: 5px;
left: 10px;
}
<div class="slideseo-box">
Membuat box info menggunakan Icon Font Awesome
</div>
Finish Read? Let's Say:
Thank's for visit us:
Anda sedang membaca artikel tentang Cara Menggunakan Icon Font Awesome di Blog dan anda bisa menemukan artikel
Cara Menggunakan Icon Font Awesome di Blog ini dengan url https://masnir.blogspot.com/2024/08/cara-menggunakan-icon-font-awesome-di.html. Anda boleh menyebarluaskan atau mengcopy artikel
Cara Menggunakan Icon Font Awesome di Blog ini jika memang bermanfaat bagi anda atau teman-teman anda, namun jangan lupa untuk mencantumkan link sumbernya. Terima Kasih
