FONT AWSOME 5 YANG KEREN UNTUK MELENGKAPI DESAIN TEMPLATE BLOG

Lebih keren dan lebih kompatibel dengan HTML5
Jika selama ini kita menggunakan fa fa awsome icon untuk mempercantik desain blog, misalnya saya menggunakannya untuk menampilkan ikon  Beranda; atau Download dan lainnya masih menggunakan font awsome model lama, maka menurut hemat saya pada tahun 2019 sudah tepat waktunya memperbaharui semua elemen blog kita dengan elemen elemen desain yang lebih baru dan modern: Font Awsome 5 yang lebih kompatibel dengan HTML5.

dua gambar diatas dibuat dengan cara memasukan kode berikut kedalam opsi: ENTRI BARU>>HTML (bukan Compose ya)
<i class="fab fa-font-awesome-alt fa-10x"></i> dan
 <i class="fab fa-font-awesome fa-10x"></i>
Dengan ukuran fa-10x setelah dipreview dan di publish terlihat gambar di atas.

1. FONT AWSOME VERSI LAMA

Contohnya fa awsome yang lebih lama dengan kode pemanggilnya:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Kode tersebut di letakan sesudah tag <head> contohnya:
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head>
Maka ketika sobat meletakan kode fa fa home seperti ini: <i class="fa fa-home"></i> akan tampil: 

Perhatikan saja menu navigasi editblogtema yang sedang dipakai pada blog ini, saya membuatnya atau menghiasinya dengan memanfaatkan font awsome ini.

2. FONT AWSOME VERSI 5

Nah pada akhirnya segala hal harus berubah font awsome versi 5 membawa perubahan tersebut. Lebih kompatibel dengan HTML 5 pastinya, lebih disesuaikan dengan browser browser utama dunia, lebih terintegrasi dengan CSS pada tema tema blogger - kecuali mungkin pada Microsoft internet explorer versi lawas. Hapus saja kode fa awsome yang lama.

Sobat bisa memasangnya dengan terlebih dahulu memasang kode pemanggilnya caranya sama saja seperti memasang font awsome lawas seperti yang telah saya tunjukan diatas yakni dengan meletakan kode tersebut sesudah tag <head>, kodenya adalah:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
Nah sekarang masuk ke situs font awsome untuk mencari atau memilih ikon ikon yang sesuai dengan menu navigasi sobat di FONT AWSOME 5

Sobat akan melihat perbedaannya jika sebelumnya sobat telah menggunakan font awsome lama. Kalau font awsome lama menggunakan kode:
fa fa facebook, misalnya, <i class="fa fa facebook"></i>

Maka kode ikon font awsome baru sedikit berbeda, kodenya akan menjadi:
fab fa-facebook,  <i class="fab fa-facebook"></i>

Tampilan kedua kode tampak sama, tetapi performa kedua elemen (lama dan baru) pasti berbeda dari statbilitas hingga kecepatannya yang baru selalu memiliki kelebihan tersendiri.

MENGATUR UKURAN IKON  AWSOME 5

Kedua framework web baik fonts+CSS maupun SVG+JS keduanya memiliki basis kontrol user interface yang sangat mudah untuk merobah ukuran ikon font awsome pada halaman UI sobat. Cara pengaturan juga masih sama.

Perhatikan contoh berbagai ukuran ikon iglo di bawah ini:








Sobat hanya perlu merobah komando perintah ukurannya sebagai berikut:

<div style="font-size: 0.5rem;">

<i class="fas fa-igloo fa-xs"></i>


<i class="fas fa-igloo fa-sm"></i>


<i class="fas fa-igloo fa-lg"></i>


<i class="fas fa-igloo fa-2x"></i>


<i class="fas fa-igloo fa-3x"></i>


<i class="fas fa-igloo fa-5x"></i>


<i class="fas fa-igloo fa-7x"></i>


<i class="fas fa-igloo fa-10x"></i> 
Setiap hal baru datang sebagai update akan layak untuk dicoba. Pada template editblogtema ini saya masih menggunakan font awsome5 terbaru, menurut hemat saya kode kodenya cukup ringan saat terhubung ke sumber penampil ikonnya. Saat ini saya telah menghapus semua kode font awsome lawas dari dalam halaman HTML blogger saya.....

Merobah kode ikon lama ke ikon fa awsome5 juga mudah tidak perlu menghapus seluruh kode, asalkan kode pemanggilnya telah terpasang di dalam tag <head> maka ikon lama yang biasanya berawalan "fa fa" saya ganti saja awalannya tersebut dengan "fas fa" atau "fab fa" dengan cara mencoba cobanya di halaman editor HTML.

5 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Hwah, pantas saja gambar-gambar di sini tulisan/huruf-nya keren-keren dan memanjakan mata hehehe.

    BalasHapus
    Balasan
    1. font awsome tidak dimaksud untuk style tulisan, tapi lebih kepada ikon yang mewakili image atau gambar tertentu. :)

      Hapus
  2. Kebetulan ini lagi rapi2 desain, icon awesome emang keren2 yah.

    BalasHapus
  3. Ini desain blognya emang unik gini ya gan?

    BalasHapus
    Balasan
    1. Biasa saja, Gan. Hanya saja mendesain itu adalah seni, sedangkan teknik itu misalnya tentang bagaimana sebuah template harus SEO dan fast loading.

      Saya hanya menggunakan elemen HTML standar dalam membuat dan mendesain template

      Hapus
Lebih baru Lebih lama

Formulir Kontak