Belajar Memasang Icon Font Awesome Versi Terbaru

Belajar Memasang Icon Font Awesome Versi Terbaru

Assalamualaikum warahmatullahi wabarakatuh.

Tetap berusaha tersenyum walau suasan agak sedikit prihatin dengan keputusan pemerintah mengenai berita kenaikan BBM yang sudah resmi di putuskan oleh orang nomer satu di Indonesia ini. Jika anda merasa galau bisa anda kunjungi artikel saya peredara rasa galau silahkan masuk halaman : Video Youtube Goyang Rock Dangdut. Naaah pada kesempatan ini saya akan berbagi sesuai title/judul diatas. Dalam artian "Belajar Memasang Icon Font Awesome Versi Terbaru" ini aslinya memang saya yang lagi belajar dalam tahapan tersebut. Karena saya juga terinfirasi dengan postingan  Kang Adhy Suryadi (www.kompiajaib.com). sebetulnya sudah lama juga sih saya belajar mengenal tentang font awesome itu. Pertama dari Kang Ismet juga dari Mas Andes. Tadinya sih saya tidak ingin cepat cepat posting pengetahuan tentang font awesome ini. Namun sudah dua kali Sahabat saya yang Bernama Mas Em Albar Admin dari blog (www.albarnation.com). Yang mereques agar saya memposting tutorial tentang font awesome ini. Maka pada kesempatan ini semampu saya akan coba saya penuhi. Tapi versi artikelnya saya berusaha dengan tulisan khas tulisan saya. Sebelumnya semoga artikel ini bisa di pahami oleh Mas Em Albar dan semua Sahabat blogging saya yang Ganteng dan Cantik.

Baca Juga Artikel lainya :   Semua Tentang Trik Blogger

Tentang Font Awesome :

Font awesome saya ketahui dari beberapa sumber terpercaya adalah sekelompok kumpulan icon yang basicnya berupa font akan tetapi bisa menampikan gambar tanpa anda harus menambahkan format gambar seperti, jpg, png, gif, bmp, dan format gambar lainya. Biasanya font awesome digunakan pada web situs atau blog yang menggunakan icon pada menu, title, header atau pada bagian lainya di situs atau blog. Sebetulnya tanpa menggunakan font awesome pun untuk menampilkan gambar pada area yang menggunakan icon bisa juga di pasang icon dengan menggunakan gambar dengan penerapan secara style pada area Html template blog. Namun yang saya ketahui tidak semua pemblogging bisa melakukan pekerjaan tersebut. Dengan cara mengoprak aprek seisi kode template dengan memsanag icon menggunakan gambar pada html. Karena pekerjaan tersebut butuh keashlian khusus untuk penerapanya.

Icon Awesome versi terbaru 4.2.0 :

Nah dengan adanya icon Font awesome ini. akan menjawab pertanyaan atau akan memudahkan anda dalam menampilkan beberapa icon yang ingin anda tampilkan pada bagian tertentu pada blog anda. Contoh DEMO Tampilan Font Awesome seperti yang terlihat pada bagian header/Menu di blog saya ini. Jika anda ingin menmpilkan desaian blog anda dengan di hiasi icon awesome ini silahkan anda simak lebih rinci tulisan ini. Namun jika anda tidak suka dengan pemakaian font awesome tidak apa apa keputusan tetap ada di tangan anda. Yang penting sudah saya jamin tutorial ini sudah saya pastikan lolos dari  Validasi HTML 5 dan CSS3. Seblumnya saya gunakan font awesome versi 4.0.3. Nah sekarang yang saya bagikan ini versi yang terbarunya Font Awesome Versi 4.2.0 yang pasti lebih komplit dan tampilan yang menarik unik elegance dan yang pasti lebih segalanya di banding versi sebelumnya. Tetapi untuk ukuran file tetap sama hanya 22 kb. Dan tidak akan menyita banyak load blog jadi bagi sobat yang takut akan load blog yang berat saya jamin tutorial font awesome ini tidak akan menguras habis kuota load blog anda.

Situs Penyedia Font Awesome :

Jika anda berminat memasang font awesome silahkan anda bisa langsung mengunjungi situs resmi penyedia font awesome versi terbaru ini. di bawah ini anda akan melihat url penyedia font awesome itu:

Kunjungi halaman font awesome :  http://fortawesome.github.io/Font-Awesome

Tetapi jika anda bingung dengan penjelasan pemasangan icon font awesom, melalui situs resminya? Silahkan bisa ikuti tutorial cara saya yang akan lebih memudahkan bagi anda dalam pemasangan Icon Font Awesome agar terpajang keren di bagian blog anda. Silahkan anda simak pemasanganya berikut dibawah ini :

Cara memasang Icon Font Awesome :
Pertama anda buka dashboard blog anda jangan lupa sign in dengan akun blog anda. Selanjutnya anda cari kode : </head> Gunakan Ctrl + F untuk memudahkan pencarian kodenya. Jikas sudah ketemu kode yang anda cari kemudian >> Selanjutnya copy kode script css icon font awesome di bawaha ini dan pastekan teapat diatas kode : </head> Di bawah ini kode yang harus anda copy nya :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

Cara Penggunaan Font Awesome Terbaru Versi 4.2.0 :

Di bawah ini cara menggunakan font awesome secara dasarnya saja. Karena pada html bagian yang akan anda pasang mungkin berbeda juga Html nya namun untuk kode standarnya sama karena yang beda mungkin tampilan dari icon font awesome nya saja contoh pemasangan dasar seperti di bawah ini :

<i class="fa fa-iconname">DISINI KODE ICON FONT AWESOME</i>

Contoh pemasangan font awesome :

Di bawah ini contoh pemasangan icon font awesome pada menu header, atau pada link page drof down yang akan di hiasi dengan icon font awesome di bawah ini lengkap penampakan pemasanganya :

<a href='http://karristaent.blogspot.com/search/label/Berita' title='Berita'><i class="fa fa-bullhorn" style='margin-right: 3px;'/>Berita</a>

Keterangan :
Kode yang berwarna MERAH itu adalah kode icon font awesome dan yang akan menampilkan icon gamabar seperti di bawah ini contoh sebagai screnshootnya saja :

Berita

Atau contoh lengkap pemasangan lainya contoh pada menu home seperti di bawah ini :

<a class="list-group-item" href="URL ARTIKEL"><i class="fa fa-home"></i>&nbsp; Home</a>

Cara mendapatkan Icon Font Awesome :

Bagaiman cara anda mendapat kumpulan kode icon font awesome itu? Baiklah karena saya sudah siapkan semua untuk mempasilitasi tutorial ini. Maka dengan ini saya akan bagikan juga url untuk anda dapatkan list icon font awesome ini. silahkan seleksi lalu copy url di bawah ini dan pastekan pada brouser internet anda

Kumpulan icon font awesome : http://fortawesome.github.io/Font-Awesome/icons/#new

Memodifikasi font awesome   : http://fortawesome.github.io/Font-Awesome/examples/#bordered-pulled

Demikianlah kiranya tutorial tentang "Belajar Memasang Icon Font Awesome Versi Terbaru" ini yang saya hadirkan untuk anda semua semoga bisa di mengerti dan dapat di pahami. Jika ada kesulitan silahkan diskusikan lewat form komentar di bawah ini. jika ada yang salah atau keliru pada semua artikel ini mohon maaf. Semoga harapan saya post tutorial tiasa bermanfaat untuk semua Sahabat blogging semua. Tetap semangat berkarya dan berbagi *salam ceria selalu ... Happy Blogging....