Selamat Datang

Tulisan Berbentuk Icon untuk Desain Website

Seringkali dalam membuat website, kita memerlukan icon untuk memberikan gambaran lebih jelas dan mudah ditangkap oleh pengguna website. Berikut ini font berbentuk icon yang bisa digunakan untuk melengkapi tampilan website Anda.

Icon Font

Cara menggunakannya mudah sekali, tidak perlu menginstall atau download apa-apa. Gunakan CDN yang sudah disediakan oleh pembuat font ini:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

atau

Bila Anda ingin menggunakan font ini di localhost silahkan download font ini di sini. Setelah itu copy-kan pada direktori website dan panggil css font awesome ini pada bagian < head > website Anda.

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

Dan silahkan pilih berbagi icon yang disediakan font ini untuk dipasang pada website Anda.

Daftar Icon yang disediakan font awesome

Daftar Icon yang disediakan font awesome

Masih bingung dengan apa yang dimaksud, baiklah… berikut saya berikan beberapa tampilan yang menunjukkan penggunaan font ini dalam beberapa komponen website.

Pada menu navigasi di bagian header website:

Home Icon pada menu navigasi website
Kode html yang digunakan:

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
  <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
</ul>

Bisa dilihat pada kode diatas untuk menampilkan icon kita cukup menentukan class sesuai dengan kode dari masing-masing icon .fa fa-book fa-fw

Tombol dengan icon di dalamnya:

Tombol dengan icon di dalamnya

Kode html yang digunakan:

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.0.3</a>

<div class="btn-group">
  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>

Nah, mudah bukan untuk menggunakannya?

Kelebihan lain yang saya sukai adalah icon ini bisa di-style menggunakan css seperti halnya font pada umumnya. Asik bukan, ingin merubah warna tinggal diberi color, merubah ukuran tinggal kasih font-size, diberi shadow juga bisa. Mantab dah !!!

Okay, sekian sharing singkat saya.

Salam





Penulis :

Saya seorang pegawai kantoran yang suka mendesain sebuah website. Hal yang saya sukai berkaitan dengan front end dan UI/UX. View all posts by Noel

Comments

10 thoughts on “Tulisan Berbentuk Icon untuk Desain Website

  1. Mantap dan simple nih tutorial,, makasih mas,,

  2. mebel jepara says:

    bermanfaat bro, thanks

  3. aldy says:

    bsa lebih rinci g’ gan,.,
    Thanks

  4. keren nih mas bro…berguna sekali tutorialnya bagi saya yang masih awam soal beginian…
    bisa kasih saran gak buat template yg saya gunkan di blog saya…
    ya biyar codenya clean trus loadingnya bisa cepet gtu.. :D :D

    coba visit ajj bang.. :D :D
    thanks… :)

  5. sangat membantu tutorialnya

  6. […] Disitu terlihat kalau kita menggunakan class fa fa-search fa-4x untuk menampilkan icon pencarian, yang dibungkus dengan sebuah div dengan ID #searchtoggl. Agar icon tersebut muncul kita terlebih dahulu menyertakan kode css dari font awesome di bagian head website. Anda bisa membaca penggunaan font awesome ini secara singkat di artikel Tulisan Berbentuk Icon Untuk Desain Website. […]

  7. bagas says:

    kok link not found 404

  8. que says:

    kak font nya kok nggak bisa di download yak.
    yang ada disini : http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.0.3.zip

  9. Link downloadnya broken gan mohon perbaiki. Soallnya ane mau download

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development