MEMANFAAT KAN FONT AWSOME 5 UNTUK DESAIN TEMA BLOG

MEMANFAAT KAN FONT AWSOME 5 UNTUK DESAIN TEMA BLOG

Lebih stabil dan terintegrasi ke CSS
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.

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.

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.

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 untuk merobah ukuran ikon font awsome pada halaman UI sobat.

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 kedua versi (lama dan baru) menurut hemat saya kode kodenya cukup ringan saat terhubung ke sumber penampil ikon terutama yang versi terbaru. Saat ini saya sedang mempertimbangkan untuk menghapus kode font awsome lawas dari dalam halaman HTML blogger saya..... 

Beri Komentar ya...

2 Comments

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

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

      Delete

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik