Menggunakan Fontawesome di Blog.
Fontawesome merupakan kupulan simbol atau icon dalam bentuk font, font ini didesign khusus untuk melengkapi konten ataupun bagaian website maupun blog yang memerlukan pola icon ataupun simbol. Direalease pada 2018, fontawesome kini menjadi kebutuhan yang sangat menarik untuk digunakan oleh situs situs besar, selain mempercantik dan menegaskan suatu fungsi konten (penggunaan simbol atau icon), penggunaan fontawesome diarasa sangat lebih baik ketimbang kita menambahkan gambar (konvensional). Banyak element dari website yang dalam penggunaan font awesome fungsionalitasnya menjadi lebih tegas, contoh pernahkan anda melihat tombol "home" dengan disematkan gambar "rumah" disampingnya?, atau icon secangkir kopi didalam isi postingan situs? yups, ini bisa sangat mudah dilakukan dengan memanfaatkan fontawesome tersebut ya.
Nilai positif yang bisa didapat dari penggunaan fontawesome yaitu:
Meningkatkan kualitas desain web. Dengan menabahkan icon makna fungsi dari suatu konten Mudah dikenali dibandingkan teks. Penggunaan secara bersamaan bahkan membuat teks terlihat lebih menonjol.
Responsif – Tidak seperti gambar pada umumnya, icon font dapat diubah menjadi lebih besar atau lebih kecil tanpa harus mengurangi kualitasnya. Dengan begitu, font akan sangat cocok digunakan pada desain web yang responsif.
Memiliki makna universal, seperti ikon amplop (envelope) yang umumnya dimaknai sebagai email atau inbox. Menghemat tempat, sehingga cocok untuk desain minimalis.
Cross-browser compablity – Icon fonts seperti Font Awesome dapat tampil konsisten pada bermacam-macam browser.
Pilihan ikon – Font Awesome memiliki ratusan ikon berkualitas tinggi dalam berbagai kategori yang terus diupdate secara berkala.
Mudah dimanipulasi – Sama seperti font pada umumnya, icon font seperti Font Awesome juga dapat dimanipulasi dengan mudah. Beberapa modifikasi bawaan yang dapat kamu gunakan meliputi perubahan ukuran, pemberian border, penambahan efek animasi, hingga penambahan class tertentu agar kamu dapat menggunakan Custom CSS.
Cara menggunakan fontawesome pada blog:
A.Sebelum fontawesome bisa kita gunakan didalam blog, pertama sekali yang harus kita lakukan adalah memasang (koneksikan) css template blog kita caranya paste kode berikut di atas kode </head> pada template blog anda:
B.Penggunaan fontawesome nantinya akan ada 2 macam, yaitu saat kita menggunakan fontawesome dielemen tampilan blog (kaitannya dengan css) dan penggunaan fontawesome pada postingan (berkaitan dengan konten HTML) blog.Kunjungi link berikut untuk memilih fontawesome:
https://fontawesome.com/icons
Akan muncul banyak Fontawesome yang bisa digunakan ,klik salah satu icon yang mau anda pasang ,disini saya memilih contoh fontawesome dengan nama air freshener (yang saya lihat itu malah seperti pohon cemara heee.):
C.1 menggunakan di dalam konten postingan (HTML)
anda tinggal menempelkan kode HTML fontawesome(lihat gambar diatas) langsung dipostingan(ingat selalu untuk mengubah dahulu mode penulisan dari "compose" ke "HTML". contoh jika anda akan membuat seperti ini:
bonsai cemara
maka model kodenya yaitu:
mengubah warna dan bentuk:
codenya seperti berikut:
font-size:50px=ukuran font
color:#008c5f=warna fontawesomenya
C.2 menggunakan fontawesome dalam konten css (penunjang konten template blog), misalkan kita disini akan membuat class baru dalam tag html template dengan nama kutip, dan menggunakan icon bonsai tadi untuk menjadi icon kutipnya (jadi akan tampil menggantikan icon kutip), contoh bentuk css class kutip yang akan kita buat untuk template blog:
Nilai positif yang bisa didapat dari penggunaan fontawesome yaitu:
Meningkatkan kualitas desain web. Dengan menabahkan icon makna fungsi dari suatu konten Mudah dikenali dibandingkan teks. Penggunaan secara bersamaan bahkan membuat teks terlihat lebih menonjol.
Responsif – Tidak seperti gambar pada umumnya, icon font dapat diubah menjadi lebih besar atau lebih kecil tanpa harus mengurangi kualitasnya. Dengan begitu, font akan sangat cocok digunakan pada desain web yang responsif.
Memiliki makna universal, seperti ikon amplop (envelope) yang umumnya dimaknai sebagai email atau inbox. Menghemat tempat, sehingga cocok untuk desain minimalis.
Cross-browser compablity – Icon fonts seperti Font Awesome dapat tampil konsisten pada bermacam-macam browser.
Pilihan ikon – Font Awesome memiliki ratusan ikon berkualitas tinggi dalam berbagai kategori yang terus diupdate secara berkala.
Mudah dimanipulasi – Sama seperti font pada umumnya, icon font seperti Font Awesome juga dapat dimanipulasi dengan mudah. Beberapa modifikasi bawaan yang dapat kamu gunakan meliputi perubahan ukuran, pemberian border, penambahan efek animasi, hingga penambahan class tertentu agar kamu dapat menggunakan Custom CSS.
Cara menggunakan fontawesome pada blog:
A.Sebelum fontawesome bisa kita gunakan didalam blog, pertama sekali yang harus kita lakukan adalah memasang (koneksikan) css template blog kita caranya paste kode berikut di atas kode </head> pada template blog anda:
<!--fontawesomeRPS-->
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' integrity='sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr' rel='stylesheet'/>
B.Penggunaan fontawesome nantinya akan ada 2 macam, yaitu saat kita menggunakan fontawesome dielemen tampilan blog (kaitannya dengan css) dan penggunaan fontawesome pada postingan (berkaitan dengan konten HTML) blog.Kunjungi link berikut untuk memilih fontawesome:
https://fontawesome.com/icons
Akan muncul banyak Fontawesome yang bisa digunakan ,klik salah satu icon yang mau anda pasang ,disini saya memilih contoh fontawesome dengan nama air freshener (yang saya lihat itu malah seperti pohon cemara heee.):
C.1 menggunakan di dalam konten postingan (HTML)
anda tinggal menempelkan kode HTML fontawesome(lihat gambar diatas) langsung dipostingan(ingat selalu untuk mengubah dahulu mode penulisan dari "compose" ke "HTML". contoh jika anda akan membuat seperti ini:
bonsai cemara
maka model kodenya yaitu:
bonsai cemara <i class="fas fa-air-freshener"></i>
mengubah warna dan bentuk:
codenya seperti berikut:
bonsai cemara <i class="fas fa-air-freshener" style="color: #008c5f; font-size: 50px;"></i>
dengan informasi:font-size:50px=ukuran font
color:#008c5f=warna fontawesomenya
C.2 menggunakan fontawesome dalam konten css (penunjang konten template blog), misalkan kita disini akan membuat class baru dalam tag html template dengan nama kutip, dan menggunakan icon bonsai tadi untuk menjadi icon kutipnya (jadi akan tampil menggantikan icon kutip), contoh bentuk css class kutip yang akan kita buat untuk template blog:
.kutip:before {
content: "\f109";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
display: inline-block;
margin-right: 3px;
}
tes isi paragraf yang menggunakan tanda kutip buatan dengan icon fontwesome bonsai kita tadi, maka akan tampil seperti ini.....jadi setiap anda menggunakan class kutip sekarang paragraf anda akan selalu diawali dengan icon bonsai
(cara memanggil fungsi kutipnya):
<div class="kutip">paragrap anda</div>
DONASI SAWER TRAKTIR
Terimakasih Atas Dukungan serta Keiklasan Anda
Newer Posts
Newer Posts
Older Posts
Older Posts
Comments