Font Icon oleh WapBlog.ID

Beberapa hari yang lalu, mungkin ada beberapa yang belum menyadari bahwa Icon WapBlog.ID mengalami perubahan. Yap, Icon kali ini bukan menggunakan Fontawesome v4.7 ataupun Font Icon dari Google Material Design melainkan garapan dari tim Official WapBlog.ID. Icon ini sudah diterapkan dibeberapa layanan WapBlog.ID seperti Account Set, DM, dan halaman depan WapBlog.ID.

Nah kali ini, kami akan membagikan cara bagaimana menggunakan Icon WapBlog.ID ini untuk icon blog. Untuk diingat juga, dalam beberapa waktu kedepan semua situs Official WapBlog.ID juga akan menggunakan Icon ini.

Cloud Icon WapBlog.ID

Langsung kopi saja stylesheet dibawah dan letakan di dalam tag <head> blog atau situs mu.

<link rel="stylesheet" href="https://cdn.wapblog.id/fonts/wb-icons/v1.2.2/style.css" media="all" />

Untuk WapBlog.ID, kamu bisa meletakan di:
1. Tema
2. Header
3. cari tag <head> 
4. Pastekan didalamnya dibagian manapun (kami sarankan diatas stylesheet blog).

Contoh

<head>

<link rel="stylesheet" href="https://cdn.wapblog.id/fonts/wb-icons/v1.2.2/style.css" media="all" />

</head>

<body>

<i class="wbi wbi-wapblog"></i> WapBlog<br />

<i class="wbi wbi-wapblog-icon"></i> WapBlog Icon

</body>

Daftar Ikon

Kalian hanya perlu menggunakan class wbi dan prefix wbi- diikuti nama icon

Untuk daftar ikon kalian bisa melihat daftar lengkapnya di:
https://icon.wapblog.id/icons

Animasi

Bukan kartun atau gambar bergerak, tetapi efek animasi dari Icon WapBlog.ID Seperti berputar secara halus, atau berputar secara bertahap.
Kalian bisa menambahkan class wbi-spin untuk memutar icon secara halus searah jarum jam, dan wbi-step, untuk memutar ikon secara bertahap searah jarum jam. Sementara class wbi-spin-flip dan wbi-step-flip untuk memutar icon berlawanan arah jarum jam.

Contoh Animasi

<head>

<link rel="stylesheet" href="https://cdn.wapblog.id/fonts/wb-icons/v1.2.2/style.css" media="all" />

<style>i.wbi{
font-size: 32px;
}</style>

</head>

<body>

<i class="wbi wbi-gear wbi-spin"></i>
<i class="wbi wbi-spinner wbi-step-flip"></i>
<i class="wbi wbi-sync wbi-spin"></i>
<i class="wbi wbi-recovery wbi-step-flip"></i>

</body>

Nah, if you're using english in WapBlog.ID you can read this tutorial on https://icon.wapblog.id/get-started.

Pranala

1. Lisensi WapBlog.ID Icon
2. WapBlog.ID Icon List
3. Tools Icon