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

Oleh

admin

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.

    Artikel Terkait

    Bagikan: