list/daftar icon font awesome

Untuk menampilkan, memasang / menambahkan icon di template ini saya menggunakan FontAwesome, tetapi untuk meringankan loading blog disini saya tidak memasang semua iconnya, hanya mengambil beberapa icon yang memang dibutuhkan

Untuk memasangnya juga jadi lebih mudah, kalian tinggal menuliskan class iconnya di tempat yang ingin dipasang icon tersebut.

Contoh, saya ingin memasang icon home di menu bar, langkah pertama cari dulu kode htmlnya, misal kodenya seperti dibawah ini


<ul id='nav-bottom'>
<li><a href='/'><span>Home</span></a></li>
<li><a href='/'><span>About</span></a></li>
</ul>

Sekarang tentukan bagian mana yang mau dpasang iconnya, disini saya akan memasnag di menu HOME, Kalian cukup rubah / tambahkan class iconnya seperti ini


<ul id='nav-bottom'>
<li><a href='/'><span class='fa fa-home'>Home</span></a></li>
<li><a href='/'><span>About</span></a></li>
</ul>

Kalo sudah tinggal save

Kalian juga bisa memasangnya seperti memasang icon font awesome pada umumnya.
Nah untuk kumpulan icon yang sudah ada di template ini kalian bisa liat daftar icon dibawah ini.
Untuk pemasangan di css Before / After, pemasangannya seperti biasa cukup tambahkan Unicodenya saja.

Icon Name Unicode Info Class
Facebook f09a fa-facebook
Twitter f099 fa-twitter
Instagram f16d fa-instagram
Google f1a0 fa-google
Pinterest P f231 fa-pinterest-p
User f007 fa-user
Tag f02b fa-tag
Tags f02c fa-tags
Calendar f073 fa-calendar
Comment f075 fa-comment
Home f015 fa-home
Mail Reply f112 fa-mail-reply
Remove, close, times f00d fa-remove, fa-close, fa-times
Angle Up f106 fa-angle-up
Angle Right f105 fa-angle-right
Angle Down f107 fa-angle-down
Angle Left f104 fa-angle-left
Star f005 fa-star
Star O f006 fa-star-o
Code f121 fa-code
Smile O f118 fa-smile-o
External Link f08e fa-external-link
Arrow Cricle O Right f18e fa-arrow-circle-o-right

Jika ingin menambahkan icon di templatenya, kalian cukup cari kode cssnya di link FontAwesome Icon List dan simpan di daftar icon berikut ini..


.fa-user:before {content: "\f007"}
.fa-tag:before {content: "\f02b"}
.fa-tags::before {content: "\f02c"}
.fa-calendar::before {content: "\f073"}
.fa-comment::before {content: "\f075"}
.fa-home::before {content: "\f015"}
.fa-mail-reply::before,.fa-reply::before {content: "\f112"}
.fa-remove::before,.fa-close::before,.fa-times::before {content: "\f00d"}
.fa-angle-left::before,.af-angle-left:after {content: "\f104"}
.fa-angle-right::before,.af-angle-right:after {content: "\f105"}
.fa-angle-up::before {content: "\f106"}
.fa-angle-down::before,.af-angle-down:after {content: "\f107"}
.fa-star::before {content: "\f005"}
.fa-star-o::before {content: "\f006"}
.fa-facebook-f::before, .fa-facebook::before {content:"\f09a"}
.fa-twitter::before {content:"\f099"}
.fa-google::before {content:"\f1a0"}
.fa-instagram::before {content:"\f16d"}
.fa-pinterest-p::before {content: "\f231"}
.fa-code::before {content: "\f121"}
.fa-smile-o::before {content: "\f118"}
.fa-external-link::before{content: "\f08e"}
.fa-arrow-circle-o-right::before {content: "\f18e"}