Cara Meletakan Font Awesome (ICON) bergerak di menu navigasi / Didalam postingan blogger (Fa icon bergerak)

Meletakan icon font awesome animation  Di MENU Navigasi dan juga didalam postingan Blogger

Hallo sobat para pencari pengetahuan.nah dikesempatan kali ini admin mau share Tutorial bagaimana cara meletakan fa icon (FONT AWESOME) didalam postingan blogger.sobat juga bisa meletakan icon pada menu navigasi blog sobat.

Banyak banget yang request tutorial nya di WA Admin wkwkwk.

Coba sobat perhatikan menu navigasi blog CariPengetahuan-Id,terdapat icon yang bergerak bukan?.Tentu hal tersebut membuat blog lebih menarik pastinya.yah mungkin juga menarik lebih banyak visitor.

icon / Font Awesome bergerak yang diletakan di Menu Navigasi VIO Magz. Klik disini untuk melihat langsung

Menu Navigasi CariPengetahuan-Id

Bagaimana Cara Memasukan Font Awesome di blog

 

Kebanyakan Template Blogger sudah terpasang pemanggil font Awesome jadi kalian tidak perlu repot repot untuk meletakan kodenya.

 Bagi yang templatenya belum ada font awesome berikut cara memanggilnya

1. buka website ini https://fontawesome.com 
2. lalu pilih "Start Using Free"
3. Nanti sobat akan menemukan suatu code,piilih versi yang paling baru.dikarenakan tampilan iconya lebih terupdate.
4. copy code tersebut.pergi ke menu blogger pilih Template>Edit html.
5. Lalu pastekan code pemanggil font awesome tadi di atas code </head>
6. Instalisasi selesai.

Dengan cara diatas sobat sudah bisa meletakan font awesome (Icon) di blogger.

Bagaimana cara meletakan icon di

Cara meletakan icon di blog adalah dengan menulis tag <i> dan disusul dengan class fa.lalu misalkan sobat mau meletakannya didalam postingan tulis dimode HTML bukan  dicompose.banyak sekali daftar daftar code icon yang tersedia contohnya :

<i class="fa fa-book"></i>

 Hasil :

<i class="fa fa-android"></i>

 Hasil :

dibawah ini contoh lainnya

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

Untuk selebihnya sobat dapatkan di https://fontawesome.bootstrapcheatsheets.com/

Memutar ICON

 

Memutar icon sangatlah mudah sobat tinggal memasukan class fa-rotate dan bisa juga fa-flip.

Untuk memutar sebuah icon sobat harus menerapkan derajat putaran

Merotasi Icon

contoh :

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

 HASIL :

fa-rotate-90

fa-rotate-180

fa-rotate-270

fa-flip-horizontal

fa-flip-vertical

Memberi Warna Pada fa awesome

 

Nah jadikan icon kalian menjadi lebih menarik dengan memberi warna pada icon.lalu,bagaimana cara memberi warna?.sobat hanya perlu menambahkan style="color : Warna yang diinginkan". Masih bingung?.Mari lihat cara penggunannya

<i class="fa fa-android" style="color: green"></i> icon android diberi warna hijau

Hasil :
icon android diberi warna hijau

Untuk pewarnaan yang lebih spesifik sobat juga bisa menggunakan html code warna seperti contoh Admin mau mewarnai dengan warna Light sky blue,code html nya adalah #87CEFA 

<i class="fa fa-windows" style="color: #87CEFA"></i> icon windows diberi warna biru langit

Hasil :
icon windows diberi warna biru langit

Jika kalian ingin teks nya berwarna sama seperti icon nya sobat tinggal memindahkan tag </i> dibelakang teks.

contoh :

<i class="fa fa-windows" style="color: #87CEFA"> TULISAN INI BERWARNA SAMA SPRTI ICON</i>

Hasil :
TULISAN INI BERWARNA SAMA SPRTI ICON

gimana?sangat mudah bukan?.Pelajaran selanjutnya ialah  mengubah ukuran Fa Awesome

Mengubah Ukuran ICON (Font awesome)

 

jika kalian merasa tidak puas dengan ukuran icon.kalian bisa memperbesarnya dengan menambahkan  :

• fa-2x Untuk perbesaran 2x lebih besar
• fa-3x Untuk perbesaran 3x lebih besar
• fa-4x Untuk perbesaran 4x lebih besar
• fa-5x Untuk perbesaran 5x lebih besar

 Contoh perbesaran 2x:

<i class="fa fa-pencil fa-2x"></i>

Hasil :


Contoh perbesaran 5x:

<i class="fa fa-pencil fa-5x"></i>

Hasil :

 

Membuat Animation Font Awesome (ICON bergerak)

 

Untuk membuat icon sobat menjadi lebih lucu sobat bisa menggerakan icon.
Cara meng-Animasikan Icon :

Copy code dibawah ini.lalu pergi ke Template>>Edit HTML letakan dibawah <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css"/>

code diatas sangat penting untuk membuat icon kalian menjadi bergerak.jadi pastikan code diatas kalian pasang ya..

Berikut beberapa pilihan efek Animasi unik yang patut kalian coba :

<i class="fa fa-hand-paper-o faa-shake animated"> </i>

Hasil : Efek tangan yang melambai

<i class="fa fa-home faa-tada animated"> </i>

Hasil : Tada Animation

<i class="fa fa-home faa-bounce animated" style="color: red"> </i>

Hasil : Efek icon bounce berwarna merah

nah untuk animasi lainya kalin bisa coba dibawah ini :

No	Code	Hasil
1	faa-wrench animated
2	faa-ring animated
3	faa-horizontal animated
4	faa-vertical animated
5	faa-flash animated
6	faa-bounce animated
7	faa-spin animated
8	faa-float animated
9	faa-pulse animated
10	faa-shake animated
11	faa-tada animated
12	faa-falling animated
13	faa-passing animated
14	faa-passing-reverse animated
15	faa-burst animated

Nah itu semua ialah code animasi automatis bergerak.terus bisakah kita membuat icon bergerak cuman saat mengklick ikon tersebut?.tentu saja bisa sobat hanya perlu menambahkan -hover di belakang animated

contoh :

<i class="fa fa-hand-paper-o faa-shake animated-hover"></i> Icon akan bergerak jikaa disentuh

Hasil :
Icon akan bergerak jikaa disentuh

Penutup

 

Terimakasih telah mengikuti Tutorialnya sampai habis.oh ya,jangan lupa untuk membaca pengetahuan lainya mengenai blog di label blogger.Mohon maaf jika terdapat kesalahan kata maupun tutoral yang sulit dipahami.jika sobat masih belum bisa,sobat bisa menanyakan langsung lewat coment dibawah ini.jangan lupa share keteman teman blogger sobat dan jika berkenan sobat bisa memberikan reaksi dengan meng klik icon.

tag : cara membuat Font Awesome bergerak diblogger,Meletakan icon animation di blog.