10 July 2018

cara pasang dan menggunakan font awesome

Font-awesome merupakan framework CSS untuk membuat ikon. Font-awesome sendiri memiliki ratusan ikon yang bisa kita gunakan.


Langkah-langkah memasang Direktori FontAwesome pada Blog
1. silahkan buka Blogger > Template > Edit HTML > Kemudian cari kode <head> .
2. copykan salah satu kode CSS berikut ini dibawah kode <head> .

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> 
atau 
<link href='path/to/font-awesome/css/font-awesome.min.css' rel='stylesheet'/>
atau
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/> 

3. Simpan Template
4. Selanjutnya panggil kode FontAwesome yang akan anda dapatkan pada situs dibawah ini :



Cara Menggunakan FontAwesome pada Blog :
Setelah memasang direktori FontAwesomepada Blog, panduan selanjutnya adalah menggunakan FontAwesome.
Menggunakan FontAwesome pada blog berarti kita memanggil kode FontAwesome sesuai kode yang telah kita dapatkan dari situs penyedia FontAwesome diatas. Sebagai contoh FontAwesome yang kita gunakan adalah ikon "HOME", yang memiliki kode seperti dibawah ini :

apabila anda ingin menggunakan ikon Home tersebut, maka penulisannya cukup seperti ini :

 <i class="fa fa-home"></i> Beranda 

Hasilnya akan tampil seperti dibawah ini (ikon Home berada disebelah kiri teks Beranda) :
Beranda

📖Pastikan bahwa kode direktori fontawesome-nya sudah terpasang pada template blog anda, apabila belum terpasang maka FontAwesome nya tidak akan tampil.
📚Ikon - ikon font awesome ini sangat cocok digunakan pada Menu - Menu Blog



Daftar Awesome Font - Kode Huruf untuk Membentuk Gambar




Icon Picture
Icon Name
Icon Value
fa-glass
"\f000"
fa-music
"\f001"
fa-search
"\f002"
fa-envelope-o
"\f003"
fa-heart
"\f004"
fa-star
"\f005"
fa-star-o
"\f006"
fa-user
"\f007"
fa-film
"\f008"
fa-th-large
"\f009"
fa-th
"\f00a"
fa-th-list
"\f00b"
fa-check
"\f00c"
fa-times
"\f00d"
fa-search-plus
"\f00e"
fa-search-minus
"\f010"
fa-power-off
"\f011"
fa-signal
"\f012"
fa-cog
"\f013"
fa-trash-o
"\f014"
fa-home
"\f015"
fa-file-o
"\f016"
fa-clock-o
"\f017"
fa-road
"\f018"
fa-download
"\f019"
fa-arrow-circle-o-down
"\f01a"
fa-arrow-circle-o-up
"\f01b"
fa-inbox
"\f01c"
fa-play-circle-o
"\f01d"
fa-repeat
"\f01e"
fa-refresh
"\f021"
fa-list-alt
"\f022"
fa-lock
"\f023"
fa-flag
"\f024"
fa-headphones
"\f025"
fa-volume-off
"\f026"
fa-volume-down
"\f027"
fa-volume-up
"\f028"
fa-qrcode
"\f029"
fa-barcode
"\f02a"
fa-tag
"\f02b"
fa-tags
"\f02c"
fa-book
"\f02d"
fa-bookmark
"\f02e"
fa-print
"\f02f"
fa-camera
"\f030"
fa-font
"\f031"
fa-bold
"\f032"
fa-italic
"\f033"
fa-text-height
"\f034"

1 2 3 4
5 6 7 8
9 10


0 komentar:

Post a Comment