Ini Cara Menggunakan Font Awesome Offline Terbaru

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
2. cara menambahkan font awesome
Daftar Topik

Cara menggunakan font awesome offline. Bagi para web developer, membuat tampilan website yang nampak menarik tentu menjadi tantangan tersendiri. Hal ini dikarenakan untuk menghasilkan tampilan web yang menarik bila dipandang mata memerlukan proses yang tak mudah, bahkan relatif rumit karena ada banyak langkah yang harus dikerjakan. Namun, seiring semakin canggih dan berkembangnya teknologi, para web developer makin dimudahkan dengan hadirnya aneka ragam framework. Salah satunya adalah framework yang digunakan untuk membuat ikon atau simbol, yaitu Font Awesome. Ingin mengetahui lebih banyak tentang framework ini? Berikut ulasannya.

Pengertian Font Awesome

1. pengertian font awesome

Font Awesome, merupakan sebuah framework CSS. Framework ini khusus diciptakan untuk membuat ikon atau simbol. Karena itulah Font Awesome ini banyak digunakan di kalangan developer, sebab memudahkan mereka karena tak perlu lagi repot-repot membuat ikon secara manual. Dengan menggunakan Font Awesome, para web developer cukup memilih aneka ikon menarik yang dapat langsung digunakan tanpa harus membuatnya secara konvensional seperti dahulu. Memudahkan sekali, bukan?

Kelebihan Font Awesome

Selain karena kepraktisannya dan mudah untuk digunakan, Font Awesome memiliki kelebihan lain yang membuatnya ramai diminati oleh para developer. Berikut beberapa kelebihan dari framework Font Awesome. 

  1. Dapat diunduh secara gratis. Pengguna tidak perlu mengeluarkan biaya sedikitpun untuk menggunakan framework Font Awesome ini.
  2. Memiliki beragam jenis ikon yang menarik dan variatif, sehingga sangat sesuai untuk beragam jenis blog mulai dari jenis blog personal sampai website yang profesional. 
  3. Dapat bekerja dengan aneka macam framework CSS lain, termasuk Bootstrap.
  4. Kompatibel dengan beragam jenis browser seperti Chrome atau Mozilla Firefox.
  5. Dokumentasi yang ada dalam Font Awesome terbilang lengkap.
  6. Proses instalasinya relatif mudah dan tidak perlu menggunakan javascript tambahan.
  7. Tak hanya proses instalasi, penggunaannya pun mudah, hanya perlu menambahkan ikon pada bagian class HTML atau unicode pada CSS pseudo-elements. 
  8. Ukurannya ringan, sehingga tidak memberatkan saat loading blog

Cara Menambahkan Font Awesome

2. cara menambahkan font awesome

Bila tertarik untuk menggunakan fitur-fitur dari Font Awesome, maka tentunya kita harus terlebih dahulu mendownload filenya. Kamu dapat mengunduhnya di website resmi Font Awesome yakni https://fontawesome.io/. Bila sudah selesai diunduh, maka ekstrak file yang telah didownload ini ke dalam bagian direktori projects. Biasanya file ini terletak di bagian direktori assets. Agar lebih mudah saat melakukan konfigurasi, kamu dapat mengganti nama direktori agar lebih simpel dan mudah. 

Menyisipkan Font Awesome dalam HTML

Pada dasarnya, Font Awesome tidak banyak perbedaan yang signifikan dengan framework CSS lain saat digunakan. Kamu hanya perlu menghubungkan file CSS dalam HTML< lalu tinggal memanggil nama-nama classnya. Contohnya :

<link rel=”stylesheet” href=”font-awesome/css/font-awesome.min.css” />

 

Selain itu, bisa juga dengan menggunakan CDN bila ingin memakai Font Awesome tanpa hosting, caranya :

 

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css” />

 

Cara Membuat Ikon dengan Font Awesome

Bila ingin membuat ikon, kamu dapat menggunakan tag <i> dan disertai kelas fa. Ini sedikit berbeda dengan Bootstrap yang biasanya menggunakan tag <span> ketika membuat ikon. Contohnya adalah sebagai berikut ini: 

<i class=”fa fa-coffee”></i>

 

Mengganti Ukuran Ikon

Yang wajib kamu ketahui, ukuran ikon yang kita buat menggunakan Font Awesome tentu akan mengikuti ukuran font pada CSS. Tetapi, kita tetap dapat mengubahnya menjadi lebih besar ataupun lebih kecil, sebab Font Awesome menyertakan kelas-kelas dalam menentukan ukuran ikon. Contohnya sebagai berikut :

<i class=”fa fa-coffee fa-2x”></i>

 

Mengubah Warna Ikon

Font Awesome biasanya mengikuti warna teks dari suatu elemen tertentu. Bila ingin mengganti warna ikon Font Awesome, maka kita juga wajib mengganti warna teksnya. Contohnya seperti ini :

<p style=”color: orange”>

  Teks ini berwarna orage dan juga ikon ini 

  <i class=”fa fa-coffee”></i> berwarna orange

</p>

 Maka hasilnya seperti gambar berikut ini. 

3. mengubah warna ikon

Bila kamu hanya ingin mengganti warna ikonnya saja, kamu bisa memberi warna kepada ikon tersebut dengan cara ini :

 

<p>

  Teks ini berwarna hitam dan ikon ini 

  <i class=”fa fa-coffee” style=”color: orange”></i> berwarna orange

</p>

 

Membuat Ikon dengan Animasi

Font Awesome juga dapat digunakan untuk membuat ikon dengan animasi, lho. Tentunya jenis ikon yang bergerak ini sudah tak asing lagi bagi kamu, salah satunya adalah ikon yang ditampilkan saat sebuah website tengah loading. Terdapat dua kelas yang berfungsi untuk menggerakkan ikon di Font Awesome, yakni fa-spin dan fa-pulse. Kelas ini umumnya digunakan pada ikon fa-refresh, fa-cog, fa-circle-o-notch dan fa-spinner. Kamu juga bisa menggunakannya pada ikon lainnya. 

Membuat Ikon Untuk List

Dengan menggunakan Font Awesome ini, kita juga dapat membuat ikon untuk daftar atau list, caranya dengan menggunakan class fa-ul dan fa-li. Caranya adalah sebagai berikut :

 

<ul class=”fa-ul”>

  <li><i class=”fa-li fa fa-check-square”></i>List icons</li>

  <li><i class=”fa-li fa fa-check-square”></i>can be used</li>

  <li><i class=”fa-li fa fa-spinner fa-spin”></i>as bullets</li>

  <li><i class=”fa-li fa fa-square”></i>in lists</li>

</ul>

Dan hasilnya adalah seperti pada gambar berikut. 

4. membuat ikon untuk list

Nah itu dia beberapa penjelasan mengenai cara menggunakan font awesome offline, termasuk cara menggunakannya dalam berbagai fungsi. Bagaimana? Cukup mudah dan simpel, bukan? Selamat mencoba menggunakan Font Awesome untuk tampilan website yang lebih menarik!

Baca juga:

Kumpulan Font Latin Keren untuk Berbagai Kebutuhan

septirm
septirm
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

ARTIKEL LAINNYA

PEMESANAN:

Beras Organik RICE ME UP