Cara Memasang Font Awesome di Blogger

Artikel ini menjelaskan cara memasang font awesome dan cara menerapkannya di blogger atau situs.

Font awesome berguna mengurangi penggunaan icon dalam bentuk gambar pada tampilan situs. Anda tidak perlu lagi repot-repot dan susah mencari atau mendesain icon gambar untuk kebutuhan tampilan tertentu di situs. Apa itu font awesome? Font awesome adalah font web yang berbentuk icon 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.


Pertama silahkan pasang CSS font awesome di atas tag </head>

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


Setelah Anda menambahkan CSS di atas kini saatnya kita coba menerapkan font awesome tersebut. Misalnya kita akan menggunakan font awesome pada menu.

<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>

hasilnya akan tampak seperti berikut.
Font awesome ini juga memiliki efek CSS yang mudah untuk di panggil, lihat contoh berikut.



<i class="fa fa-spinner"></i>
<i class="fa fa-refresh"></i>
<i class="fa fa-cog"></i>

Icon di atas biasa saja, tidak memiliki efek apapun. Akan menjadi lebih menarik bila kita tambahkan efek, misalnya efek fa-spin yaitu efek berputar. Contoh, kita akan menerapkan efek fa-spin untuk icon ini:  fa-spinner, fa-refresh dan fa-cog. Penulisannya sebagai 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>

Hasilnya.

Tidak hanya itu, Anda dapat memperbesar dan memperkecil icon.


<p><i class="fa fa-thumbs-up fa-lg"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-2x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-3x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-4x"></i> fa-thumbs-up</p>
<p><i class="fa fa-thumbs-up fa-5x"></i> fa-thumbs-up</p>

dan hasilnya akan menjadi seperti berikut.

fa-thumbs-up
fa-thumbs-up pembesaran 2x
fa-thumbs-up pembesaran 3x
fa-thumbs-up pembesaran 4x
fa-thumbs-up pembesaran 5x

Selamat belajar :)
Daftar lengkap icon dapat Anda lihat di http://fortawesome.github.io/Font-Awesome/icons/

COMMENTS

BLOGGER: 9
  1. kenapa punya saya ketika ditmbahkan pada widget, judulnya ke bawah ya bukan kesamping ?

    ReplyDelete
    Replies
    1. nih, di coba-redesign.blogspot.com yang artikel populer, om :D

      Delete
    2. Udah bener koq, tinggal mengatur jaraknya aja (padding).
      Coba gunakan CSS berikut.
      .sidebar h3:before {
      content: "/f0ed";
      font-family: fontAwesome;
      font-size: 22px;
      font-style: normal;
      color: #F9F9F9;
      top: 0px;
      left: 0px;
      padding: 5px 15px 0px 0px;
      position: absolute;
      }

      Delete
    3. owh, gitu makasih ya om.
      maaf, ane banyak tanya, :D

      lagi belajar koding soalnya, :D

      Delete
  2. post mantap gan.. simpan dulu buat uji coba kapan-kapan.. hehehe oya gan buat blockquote kaya punya agan tu gmn y.? maaf kalau keluar dari topik.. salam blogging

    ReplyDelete
  3. mantab gan ijin paraktekin di blog
    http://logika999.blogspot.co.id/

    ReplyDelete
  4. bagaimana agar tidak mempengaruhi loading blig saat memasang font-awesome.css

    ReplyDelete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Cara Memasang Font Awesome di Blogger
Cara Memasang Font Awesome di Blogger
Artikel ini menjelaskan cara memasang font awesome dan cara menerapkannya di blogger atau situs.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxXSHllIaewKTfdFlH4nhRiIJ9aHh4wzHpqy_3G5zrklJxzkww3wvPen4diPrzbEJwMXsqIcuOEuuOp9xX4ZYBK_D3JJ4vQ65450OG58lSWaDsmde263qpn2Thj5weBm4JeWbg_cK7QM/s1600/cara+memasang+font+awesome+di+blog+blogger(1).png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxXSHllIaewKTfdFlH4nhRiIJ9aHh4wzHpqy_3G5zrklJxzkww3wvPen4diPrzbEJwMXsqIcuOEuuOp9xX4ZYBK_D3JJ4vQ65450OG58lSWaDsmde263qpn2Thj5weBm4JeWbg_cK7QM/s72-c/cara+memasang+font+awesome+di+blog+blogger(1).png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/04/cara-memasang-font-awesome-di-blogger.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/04/cara-memasang-font-awesome-di-blogger.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content