Connect with us

Hi, what are you looking for?

Tutorial

Cara Mudah Menggunakan Font Awesome Secara Online

Buat Anda yang senang dengan dunia desain pasti pernah mendengar font awesome. Platform untuk menampilkan icon dalam bentuk vektor ini bisa dengan mudah kamu gunakan dengan mengukuti tutorial berikut.

Jika kode html tidak muncul di artikel ini, Anda perlu mengunjungi halaman asli non-AMP di tautan Cara Menggunakan FontAwesome.

Bagi para pengelola website atau blogger pasti sudah tidak asing lagi dengan Font Awesome. Sebagai salah satu framework CSS, font awesome menyediakan berbagai jenis ikon yang dapat Anda gunakan untuk keperluan website. Dari semua website yang ada, baik website lama maupun baru kebanyakan menggunakan font awesome.

Bagi Anda yang tertarik untuk menggunakan font awesome terdapat beberapa langkah yang harus dilakukan. Biasanya langkah-langkah tersebut dilakukan secara online, tapi tidak menutup kemungkinan juga jika ingin dilakukan secara offline. Lalu apa saja langkah-langkah tersebut? Simak jawabannya pada ulasan berikut.

Cara Menggunakan Font Awesome Secara Online

Sebelumnya telah disebutkan bahwa font awesome memiliki banyak jenis ikon atau fitur yang dapat Anda gunakan. Cara penggunaan fitur-fitur tersebut akan dijelaskan di bawah ini. Bagi yang belum memiliki aplikasi font awesome dapat mengunduhnya terlebih dahulu kemudian lakukan instalasi pada perangkat Anda.

1. Untuk Menyisipkan dalam HTML

Font awesome dan framework CSS lain pada umumnya sama dalam penggunaannya. Anda harus menyertakan file CSS ke link yang digunakan dalam HTML, lalu panggil nama class-nya.

Contoh:

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

Apabila tidak ingin menggunakan hosting dalam font awesome, Anda bisa memanfaatkan CDN. Untuk contohnya yaitu:

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

2. Untuk Membuat Ikon

Dalam font awesome untuk membuat ikon dapat menggunakan tag <i> disertai kelas fa (merupakan font awesome).

Advertisement. Scroll to continue reading.

Contoh: jika Anda ingin membuat ikon atau gambar strawberry, maka kodenya sebagai berikut.

<i class="fa fa-strawberry"></i>

3. Untuk Mengubah Ukuran Ikon

Biasanya ukuran dari ikon akan mengikuti ukuran font pada CSS. Tapi, tahukah Anda jika ikon tersebut dapat kita perbesar atau perkecil sesuai dengan kebutuhan. Font awesome telah menyediakan beberapa kelas untuk menentukan ukuran ikon diantaranya adalah fa-lg (33% lebih besar), fa-5x, fa-4x, fa-3x, dan fa-2x.

Contoh kode:

<I class="fa fa-strawberry fa-3x"></i>

4. Untuk Mengubah Warna Ikon

Sama seperti ukuran, warna ikon yang dibuat juga akan mengikuti warna teks elemen. Jadi agar bisa mengubah warna ikon sesuai keinginan, Anda harus mengubah warna teksnya. Jika Anda tidak mengubah teksnya maka ikon yang dihasilkan akan berwarna hitam. Ada sebuah tips untuk mengubah warna ikon menjadi putih yaitu menggunakan fa-inverse.

Contoh: Anda ingin membuat ikon gambar strawberry berwarna merah

<I class="fa fa-strawberry" style="color: red"></i>

5. Untuk Menggabungkan Beberapa Ikon

Terkadang Anda ingin menggabungkan beberapa ikon menjadi satu. Hal ini juga bisa dilakukan menggunakan font awesome. Misalnya Anda ingin menggabungkan ikon circle (○) dengan ikon square (■). Untuk dapat menggabungkan kedua ikon tersebut, Anda memerlukan class elemen fa-stack.

Contoh:

<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x fa-inverse"></i>
</span>

Maka hasil yang akan diperoleh adalah sebuah ikon lingkaran di dalam kotak (◙). Penting untuk diingat bahwa yang tertulis terlebih dahulu akan menjadi dasar dalam tumpukan ikon yang dibuat.

Advertisement. Scroll to continue reading.

6. Untuk Memutar Ikon

Anda juga bisa memutar sebuah ikon menggunakan font awesome. Class yang digunakan pada elemen adalah fa-rotate-* dan fa-flip-*. Untuk lebih jelasnya bisa dilihat pada contoh berikut:

<i class="fa fa-triangle"></i> normal<br>
<i class="fa fa-triangle fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-triangle fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-triangle fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-triangle fa-flip-horizontal"></i> fa- flip-horizontal<br>
<i class="fa fa-triangle fa-flip-vertical"></i> fa- flip-vertical<br>

Maka hasilnya adalah:

▲normal

►fa-rotate-90

▼fa-rotate-180

◄fa-rotate-270

▲fa-flip-horizontal

▼fa-flip-vertical

Advertisement. Scroll to continue reading.
cara menggunakan icon fontawesome
Cara menggunakan icon fontawesome

Keuntungan Menggunakan Font Awesome

1. Gratis

Dengan font awesome Anda bisa memperbaiki tampilan website menjadi lebih menarik tanpa harus mengeluarkan biaya tambahan. Sebab aplikasi ini bebas Anda akses secara gratis.

2. Mudah digunakan

Selain tersedia dalam versi gratis, font awesome juga mudah digunakan. Anda bebas mendesain apapun dengan mudah menggunakan css seperti size, icon color, shadow, dan lain sebagainya.

3. Cocok untuk Retina Display

Ikon dari font awesome merupakan vektor. Hal ini berarti ikon-ikon yang Anda buat melalui font awesome memiliki resolusi tinggi dan tampilan yang sangat baik.

Sebenarnya tidak sulit untuk menggunakan font awesome. Hanya saja untuk menjadi lihai Anda harus tekun dan memperbanyak latihan. Dengan banyak-banyak membaca informasi tentang font awesome dan langsung mengaplikasikannya, lambat laun Anda akan menjadi lihai.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

Daftar Harga

Seperti telah diketahui bahwa tol Surabaya-Probolinggo merupakan jalan lintas Trans Jawa yang berbayar. Berikut ini disajikan daftar tarif tol Surabaya Probolinggo terbaru 2020.

Daftar Harga

Perjalanan darat dari kota Surabaya menuju Jogja kini semakin mudah dengan adanya keberadaan jalan tol. Rute perjalanan dari Surabaya ke Jogja melalui jalan tol...

Daftar Harga

Berdasarkan Keputusan Menteri Pekerjaan Umum dan Perumahan Rakyat Nomor 54/KPTS/M/2019, ditetapkan tarif tol untuk lintas Semarang-Pekalongan yang berlaku mulai tahun 2020.

Daftar Harga

Pada dasarnya, huruf ‘R’ adalah lambang ukuran foto berdasar standar internasional ISO. Masyarakat umumnya, hanya mengenal beberapa jenis ukuran foto, seperti 2R, 4R, 10R,...