Cara menggunakan font awesome

Font awesome menyediakan icon yang bisa digunakan oleh kita pada halaman web yang kita buat. Disini kita akan mencoba menggunakan icon yang disediakan oleh font awesome. Pertama tama download font awesome di halaman ini : http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip, baiklah mari kita mulai:

  1. Buatlah folder dengan nama “fawesome”
  2. Buat file dengan nama index.html
  3. Copi kan folder css dan font yang sudah di download tadi kedalam folder fawesome yang tadi kita buat. Sehingga struktur nya akan seperti ini (abaikan file.docs)

1

4. link kan font-awesome.min.css dalam file index html

 

<html>

<head>

<title>font awesome</title>

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

</head>

<body>

</body>

</html>

 

  1. icon font awesome dapat digunakan di dalam inline element dalam html seperti <i> atau <span> dengan menambahkan class dengan css prefix fa diikuti nama icon yang ingin ditampilkan. Nama nama icon dapat dilihat di http://fortawesome.github.io/Font-Awesome/icons/
  2. kali ini kita akan menambahkan icon mobil dengan nama fa-car dan icon Instagram dengan nama fa-instagram didalam halaman kita
  3. tambahkan code dalam file index seperti berikut

 

<html>

<head>

<title>font awesome</title>

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

</head>

<body>

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

<span class="fa fa-car"></span>

</body>

</html>

 

  1. save filer tersebut dan jalankan pada webrowser. Maka tampilan nya akan seperti ini

2

Semoga bermanfaat

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s