Cara membuat Awesome Font Icon untuk Blogger

Awesome Font Icons

Apakah kalian ingin membuat seperti dibawah ini :




Nah sebelum mengetahui cara membuatnya apakah  font icon itu ?

Icon Font atau lebih dikenal Awesome icon font adalah image yang di convert menjadi font yang bisa di pasang di halaman website untuk memperingan kinerja nya . dengan font icon blog / website kalian akan lebih ringan tanpa perlu takut akan image tersebut pecah dan tentunya lebih CEO .

Berikut tutorial cara membuatnya :

1. Siapkan image dengan ukuran persegi ( pixel panjang dan lebar sama ) format PNG

2. Buatlah image tersebut dengan warna hitam saja dan background transparant.

3. Kemudian kalian convert format PNG menjadi SVG di adobe illustrator atau converter online tinggal search di google atau klik DISINI untuk convert

4. buka alamat fontastic.me berikut dan lakukan registrasi

5. Jika sudah , klik menu Add More Icons kemudian klik IMPORT ICONS . Carilah file SVG yang kamu buat tadi dan klik Upload

6. Kembali ke Home halaman depan Fontastic, klik image tadi sampai warna bordirnya menjadi kuning , kamu bisa mengubah nama file SVG yang kamu upload tadi dengan cara klik CUSTOMIZE.
fontastic home

7. Jika sudah selesai pilih menu PUBLISH



Nah tahap selanjutnya pemasangan pada web atau blog kamu .  di fontastic menyediakan 2 cara memasangnya dengan cara manual dan Cloud , nah karena ini untuk blogger kita menggunakan Cloud

1. Pilih menu PUBLISH tadi , kemudian klik PUBLISH ICON
Font Cloud fontastic font

2. Copy script yang muncul di bawah " Copy this code into your HTML page header: "

3. Lakukan Parse pada script tersebut biar bisa dipasang di blogger  . Klik disini untuk parse

4. Copy kode yang sudah di parse

5. Buka Blogger kalian dan buka menu TEMA - EDIT HTML , kemudian masukkan kode tersebut dibawah <head>


<html>
<head>
Masukan kode tersebut disini </head>
<body>
<p>
CEMITI
Memberikan Informasi & Tips Tentang E Commerce dan Dunia Game secara lengkap akurat dan kredibel .
</p>
</body>
</html>



6. Buka kembali tab Fontastic tadi dan copy kode dibawahnya lagi seperti class="icon-yournamelogo" 

7. Nah kalian bisa menaruh kode tersebut dimana saja dengan menambahkah <i class="icon-yournamelogo"  style="font-size: 25px;"></i>

Note : kalian bisa merubah ukuran font icon tersebut dengan merubah angka berwarna biru tersebut

Nah mudah bukan . kalian tak perlu pusing pusing mencari icon font yang tidak ada dimana mana , tinggal membuatnya sebentar , selamat mencoba .

0 Response to Cara membuat Awesome Font Icon untuk Blogger

Posting Komentar