ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 07-10-2016

Cara Menggunakan Font Awesome – Terbaru 2016

Pada kesempatan kali ini kita akan membahas cara menggunakan font awesome

Seperti kita tahu bahwa untuk menampilkan icon font awesome, kita perlu me load beberapa file yaitu 1 file css dan 6 file fonts. total ukuran file tersebut bisa ratusan  KB! cukup memakan waktu bukan?

Nah, saat ini, font awesome telah menyediakan cara baru untuk meload semua file tersebut tanpa harus membebani server sehingga waktu load website menjadi lebih cepat.

Nah pada kesempatan kali ini kita akan membahas cara tersebut, disamping juga cara manual yang umumnya telah biasa kita gunakan.

I. Load Aset Terkait Font Awesome

Seperti telah dijelaskan sebelumnya, terdapat dua cara untuk meload file-file yang diperlukan yaitu cara otomatis dan cara manual.

1. Load Aset Font Awesome Dengan Cara Otomatis

Cara paling mudah untuk menggunakan font awesome adalah menggunakan file javascript yang telah disediakan oleh Font Awesome.

Untuk mendapatkan file ini, kunjungi halaman: Get started with Font Awesome isikan email dan klik tombol “Send my Font Awesome embed code”

Cara Menggunakan Font Awesome - Cara Termudah

Pada contoh kali ini,  saya mendapatkan email seperti ini:

Email Petunjuk Penggunaan Font Awesome

Selanjutnya copy link javascript dan paste didalam elemen <head> dari website kita, contoh:

<html>
<head>
	<link rel="stylesheet" href="css/main.css"/>
	<script src="https://use.fontawesome.com/64c9e35xxx.js"></script>
</head>
<body>
	<i class="fa fa-cog"></i>
</body>
</html>

Ketika dijalankan, maka javascript tersebut akan meload file css yang diperlukan kemudian membuat element <link> baru untuk menempatkan file css tersebut.

Pada contoh diatas, halaman akan berubah menjadi:

<html class="fa-events-icons-ready">
<head>
	<link rel="stylesheet" href="css/main.css">
	<script src="https://use.fontawesome.com/64c9e35xxx.js"></script>
	<link rel="stylesheet" href="https://use.fontawesome.com/64c9e35xxx.css" media="all">
</head>
<body>
	<i class="fa fa-cog"></i>
</body>
</html>

Dengan cara otomatis ini kita dapat melakukan pengaturan bagaimana file css di load dan versi font awesome yang ingin digunakan.

Caranya, register akun dengan mengklik tombol “Register Your Font Awesome CDN Account” pada email yang kita dapatkan tadi, kemudian lakukan pengaturan sesuai kebutuhan.

Contoh pengaturan pada akun Font Awesome

Setting Akun Pada Font Awesome CDN

Selesai. 

Sampai tahap ini kita sudah bisa menggunakan Font Awesome, silakan menuju bagian II. Cara Menggunakan Font Awesome

2. Load Aset Font Awesome Dengan Cara Manual (Offline)

Cara ini merupakan cara yang umum digunakan, yaitu kita menempatkan file css dan file font secara manual. Untuk melakukannya terlebih dahulu kita perlu mendownload file Font Awesome.

Untuk mendownloadnya sobat dapat langsung mengunjungi official websitenya.

Langkah yang diperlukan adalah:

  1. Pertama, ekstrak file zip yang telah kita download, kemudian cari folder bernama css fan fonts, selanjutnya  tempatkan kedua folder tersebut pada folder kerja kita.

    Note: folder css dan fonts harus berada pada level yang sama.

    Contoh: dalam folder htdocs kita buat file index.html dan sebuah folder css

    Membuat File Index.html dan Folder CSS

    Kemudian dalam folder css tersebut, kita buat folder font-awesome. Selanjutnya, pada folder font-awesome tersebut kita tempatkan folder css dan folder font bawaan dari Font Awesome. Selain itu saya juga menambahkan file main.css

    Menempatkan Folder CSS dan Fonts Font Awesome

  2. Load file css font awesome pada bagian <head>. Misal pada file index.html kita load file font-awesome.min.css:
    <html>
    <head>
    	<link rel="stylesheet" href="css/main.css"/>
    	<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"/>
    </head>
    <body>
    </body>
    </html>

Selesai. 

Sampai tahap ini kita sudah bisa menggunakan Font Awesome, sobat dapat langsung ke bagian II. Cara Menggunakan Font Awesome

Mengubah lokasi font

Pada kondisi tertentu mungkin kita ingin memisah lokasi file font dan file css, untuk keperluan tersebut, kita perlu melakukan beberapa perbaikan.

Misal: kita buat folder fonts pada htdocs, kemudian kita tambahkan folder font-awesome pada pada folder fonts tersebut.  Selain iu, kita pindah file css font-awesome ke direktori css.

Lokasi File CSS dan Fonts Yang Terpisah

Karena lokasi file font telah berubah, maka lokasi tersebut perlu kita sesuaikan. Buka file font-awesome.min.css yang ada di folder css, kemudian ubah lokasi font.

Lokasi font ini ada di bagian src pada @font-face. Secara default, lokasi font adalah “../fonts/” ubah sesuai dengan lokasi baru yaitu “../fonts/font-awesome/

II. Cara Menggunakan Font Awesome

Setelah kita memahami bagaimana cara meload file yang diperlukan, selanjutnya kita akan mempelajari bagaimana cara menggunakan font awesome

Untuk menampilkan icon font awesome, kita harus menambahkan class fa fa-namaicon pada elemen. fa disini untuk menset font family menjadi font-awesome dan fa-namaicon untuk menentukan jenis icon yang ingin ditampilkan.

Jenis elemen

Kita dapat menambahkan icon pada elemen apapun, namun pada umumnya digunakan adalah elemen <i>. Contoh untuk menampilkan icon setting kita tuliskan: <i class="fa fa-cog"></i>. Hasilnya sebagai berikut:

Untuk nama icon sobat dapat melihat referensinya di web resminya di halaman: Font Awesome Icons. Adapun contoh tampilan halaman tersebut adalah:

Daftar Nama Icon Font Awesome

III. Style Yang Dapat Diterapkan Pada Font Awesome

Agar sesuai dengan yang kita inginkan, Icon hasil output dari font awesome dapat kita beri style. Adapun style yang dapat diterapkan sama dengan ketika kita memberikan style pada huruf, karena sejatinya icon font hanyalah font (huruf)

Merubah warna

Untuk merubah warna, kita tinggal mendefinisikan properti color pada icon. Agar aman sebaiknya kita membuat class tersendiri pada icon.

Jika style yang ditambahkan sederhana, sobat dapat langsung menuliskannya pada elemen menggunakan inline-style

Contoh kita buat elemen HTML seperti ini

<i class="fa fa-cog setting-icon"></i>

Selanjutnya kita buat class setting-icon:

.setting-icon {
	color: #45bd55;
}

atau dengan inline-css:

<i class="fa fa-cog setting-icon" style="color: #45bd55"></i>

Hasilnya:

Merubah Ukuran Font

Seperti font pada umumnya untuk merubah ukuran font, kita perlu mendefinisikan property font-size. Font Awesome sendiri telah menyediakan class untuk merubah ukuran font yaitu fa-lg, fa-2x, fa-3x, fa-4x, atau fa-5x

Class tersebut diatas sejatinya hanya mengubah nilai font-size, saya sendiri lebih memilih mendefinisikan font-size secara manual sehingga pas dengan kebutuhan.

Melanjutkan contoh sebelumnya, misal kita ubah ukuran icon cog

.setting-icon {
	color: #45bd55;
	font-size: 52px;
}

atau bisa juga menggunakan class bawaan dari font awesome:

<i class="fa fa-cog fa-3x"></i>

Hasil:

Memberi shadow

Layaknya huruf lain, kita juga bisa memberi bayangan atau shadow pada icon, yaitu dengan mendefinisikan property text-shadow

Melanjutkan contoh sebelumnya, mari kita buat icon cog memiliki bayangan. Kita ubah class setting-icon menjadi:

.setting-icon {
	color: #45bd55;
	font-size: 12px;
	text-shadow: 3px 3px 1px #CCCCCC;
}

Hasil:

Style lain

Selain style yang berkaitan dengan tampilan icon, kita juga dapat menerapkan style lain pada icon, diantaranya terkait posisi icon: text-align, vertical-align, dan line-height

Contoh:

text-align: center;
vertical-align: middle;
line-height: 25px;

Efek: Icon Berputar

Efek ini bukan diterapkan pada icon nya tetapi pada elemen nya (elemen <i>). Style yang diterapkan sama seperti animasi pada CSS 3 yaitu menggunakan @keyframes

Font Awesome sudah menyediakan class untuk membuat efek tersebut yaitu fa-spin. Sebagai contoh mari kita buat icon cog berputar, kode HTML yang kita gunakan: <i class="fa fa-cog fa-spin"></i>
Hasil:

Secara default, durasi putaran adalah 2s, kita dapat mengubahnya dengan mendefinisikan sendiri properti animation, contoh:

.setting-icon {
	color: #45bd55;
	font-size: 12px;
	text-shadow: 1px 1px 1px #CCCCCC;
	animation: fa-spin 1s infinite linear;
}

Hasil:

Properti animation yang digunakan pada efek ini baru tersedia pada CSS 3 yang sudah didukung oleh mayoritas browser modern, namun khusus untuk IE, baru mendukungnya pada versi 10 keatas

Efek Lain

Terdapat berbagai efek menarik lainnya seperti icon yang terbalik (Flipped icon), icon yang memutar (Rotated Icon) dan icon yang bertumpuk (Stacked Icon)

Efek efek tersebut dapat dipelajari pada halaman contoh cara menggunakan font awesome pada web resminya: Font Awesome Examples

Demikian pembahasan mengenai cara menggunakan font awesome, semoga bermanfaat.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail