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>Maka ketika sobat meletakan kode fa fa home seperti ini: <i class="fa fa-home"></i> akan tampil:
<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>
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:
<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.
Hwah, pantas saja gambar-gambar di sini tulisan/huruf-nya keren-keren dan memanjakan mata hehehe.
BalasHapusfont awsome tidak dimaksud untuk style tulisan, tapi lebih kepada ikon yang mewakili image atau gambar tertentu. :)
HapusKebetulan ini lagi rapi2 desain, icon awesome emang keren2 yah.
BalasHapusIni desain blognya emang unik gini ya gan?
BalasHapusBiasa saja, Gan. Hanya saja mendesain itu adalah seni, sedangkan teknik itu misalnya tentang bagaimana sebuah template harus SEO dan fast loading.
HapusSaya hanya menggunakan elemen HTML standar dalam membuat dan mendesain template