Salam sobat kali ini saya ingin share cara memasang font awesome di blog sobat, yang berguna untuk mengurangi penggunaan icon gambar pada tampilan. jadi anda tidak perlu lagi repot dan susah mencari atau mendesain icon gambar untuk kebutuhan tampilan tertentu di blog anda.
Apa sih sebenarnya font awesome itu?font awesome adalah font web yang terbentuk beberapa ikon siap pakai untuk antarmuka web menggunakan pemanggil css, umumnya digunakan untuk Twitter Bootstrap, ada ratusan lebih icon di Font awesome dan akan bertambah tiap rilisnya lengkapnya bisa sobat lihat di sini untuk jenis jenis font awesome yang tersesia.
oke langsung saja kita teruskan ke cara memasang font awesome di blog kita...
pertama silahkan pasang css font awesome di atas tag
</head>, berikut ini cssnya...
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
css font awesome di atas adalah versi baru jika sebelumnya anda telah memasang css awesome versi di bawah ini
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
silahkan ganti dengan css terbaru di atas, agar font awesome yang nanti akan kita gunakan berfungsi.
setelah sobat menambahkan css di atas kini saatnya kita coba untuk menggunakan font awesome tersebut, yang perlu anda ingat penggunaan font awesome ini lebih jadi tinggal kita letakkan saja, misalnya seperti ini:
kita akan menggunakan font awesome pada sebuah menu maka kiata tambahkan seperti berikut
<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>
dan hasilnya akan tampak seperti berikut
tampilan menu di atas cssnya hanya untuk demo, jadi bisa di terapkan untuk menu sobat sendiri, dan untuk menambahkan ke menu sobat sendiri silahkan lakukan seperi penempatan kode di atas...
font awesome ini juga memiliki css efek yang mudah untuk di panggil tampa kita harus surah mendesain, apa lagi yang tidak paham kode, coba lihat di bawah ini
<i class="fa fa-spinner"></i>
<i class="fa fa-refresh"></i>
<i class="fa fa-cog"></i>
ikon di ats biasa saja, tidak memiliki efek apapun tetapi ketika kita tambahkan efek berikut ini maka akan menjadi lebih menarik
efek yang saya tambahkan adalah fa-spin yaitu efek untuk berputar. yang juga bekerja di ikon awesome
fa-spinner,
fa-refresh dan
fa-cog silahkan sobat coba sendiri. penempatannya seperti berikut:
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
tidak hanya itu, cara untuk memperbesar dan memperkecil pun mudah hanya memakai cara kode seperti di bawah ini
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
dan hasilnya akan menjadi seperti
fa-camera-retro
fa-camera-retro
fa-camera-retro
fa-camera-retro
fa-camera-retro
itu saja share saya kali ini semoga sobat bisa lebih mengerti, semoga bermanfaat...
Belum ada tanggapan untuk "Cara memasang font awesome di blogger"
Post a Comment