Rabu, 24 April 2019

Cara Memasang Font Ikon Yang Menakjubkan Di Template Blogger Anda

main dengan template Blogger Anda dan menyesuaikan desain Cara Memasang Font Ikon yang Menakjubkan di Template Blogger Anda
Apakah Anda ingin bermain-main dengan template Blogger Anda dan menyesuaikan desain? Atau apakah Anda merancang template yang profesional untuk meraup penghasilan? Bagaimana Anda berurusan dengan ikon template, menyerupai tombol, kontrol form, sinyal navigasi, dll? Kebanyakan orang memakai gambar untuk untuk ikon tersebut yang cenderung memburuk bila ukurannya diperbesar. Beberapa pengembangan akan menurunkan kualitas gambar untuk menghindari persoalan ini, tapi tanpa disadari telah diperkenalkan yang gres dan ini sanggup mempercepat waktu buka halaman sebab ukuran filenya meningkat. Solusinya terletak pada font berbasis ikon menyerupai Font Awesome yang sanggup membantu desainer mengoptimalkan ikon pada situs Anda.

Apa itu Font Awesome?
Font Awesome yaitu font ikon yang awalnya dirancang untuk Bootstrap. Ini yaitu kumpulan dari beberapa SVG (Scalable Vector Graphic) ikon yang sanggup diadaptasi dan dipakai pada halaman Web manapun. Ini yaitu ikon dengan compact-size yang ukurannya tidak berat yang berarti mereka mempertahankan integritas saat ukurannya diperbesar.

Sebagai seorang desainer, ini yaitu kit yang berkhasiat untuk dimiliki kerena akan membiarkan Anda membuat desain profesional dan dioptimalkan untuk halaman web Anda.

Font Awesome mengatakan beberapa fitur yang sangat luar biasa yang membuatnya sempurna, yuk kita simak!
  • Font Awesome berisi keloksi 369 ikon SVG dari bermacam-macam kategori termasuk kontrol navigasi, ikon mata uang, aplikasi web, ikon merek, dan sebagainya.
  • Font Awesome sangat ringan dan membuat loading blog terasa cepat dibandingkan dengan gambar CSS. Mereka juga terukur dan sanggup diubah menjadi banyak sekali ukuran tanpa mensugesti kualitas.
  • Bagian terbaik yaitu font ini gampang disesuaikan! Anda sanggup menerapkan gaya CSS untuk memodifikasinya sesuai kebutuhan Anda. Anda sanggup mengubah ukuran, warna, bayangan, dan segala sesuatu yang biasanya sanggup dilakukan dengan CSS.
  • Yang terakhir yaitu ikon font ini GRATISSS..!!!

Menambahkan ikon Font Awesome di Blogger
Ikuti langkah-langkah berikut ini untuk menambahkan ikon Font Awesome di mana saja di blogger Anda (atau halaman web HTML).

Hubungi External Stylesheet
Buka instruksi sumber halaman web Anda dan cari penggalan <head>. Jika Anda ingin menambahkan ikon ini ke dalam template Anda maka perlu membuka Dashboard Blogger Anda lalu masuk ke Edit HTML. Setelah Anda menemukan penggalan header, copy paste baris berikut ini di bawah instruksi <head>.

link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Pastikan Anda menyalin link itu (termasuk penggalan http://). Di sinilah file Font Awesome CSS disimpan. Anda sanggup mendownload ke server Anda sendiri bila Anda mempunyai kecepatan yang besar.

Menambahkan Ikon
Anda sanggup melihat daftar ikon yang tersedia di situs Font Awesome ini. Pilih ikon Anda sukai dan catat nama CSS Class-nya (misal: fa-home atau fa-arrow-down). Sekarang untuk memakai ikon ini, gunakanlah tag <i> menyerupai ditunjukkan di bawah ini.

<i class="fa fa-home"></i>

Anda sanggup mengganti teks yang disorot dengan nama kelas dari setiap ikon yang Anda suka. Misalnya, <i class="fa fa-arrow-down"></ i>. Karena ini yaitu tag inline, Anda sanggup menggunakannya di dalam tag paragraf, daftar tag, bahkan anchor (<a>) tag, dan sebagainya.

Mengedit Ikon
Anda sanggup menerapkan beberapa CSS style untuk sebuah ikon. Hanya mengambil kelasnya dan menulis CSS style yang gres menyerupai yang ditunjukkan di bawah ini.

.fa-home {
 font-size: 32px;
 color: #033;
 padding: 8px;
 border: 1px solid #000;
 float:left;
}

Sangat sederhana kan?? :)

Nah, kini Anda sanggup membuat template Anda sendiri dengan ikon-ikon yang menakjupkan. Bahkan Anda akan mendecak kagum dengan karya Anda sendiri. Silahkan Anda praktikkan di depan Dashboard Blogger Anda masing-masing. Pada postingan selanjutnya kami akan membahas cara melaksanakan kostumisasi pada Font Awesome ini.

0 komentar:

Posting Komentar