[share] Cara Membuat Icon Tambahan Untuk Bootstrap

Bismillah…

Kali ini gw sedikit mau share kayak trick sih.. yang gw dapet dari link ini:

http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily

Dari web tersebut kita akan disuruh membuka beberapa web sebagai tools/ alat pembuat icon diantaranya:

  1. http://www.famfamfam.com/lab/icons/silk/      <- ini icon sets
  2. http://spritegen.website-performance.org/    <– ini untuk generator css nyah

Langkah I, download icon set, bisa dari link diatas atau icon lainnya.. kurang lebih isi icon kayak gambar dibawah ini:

icon-1

Langkah II, upload semua icon ke link ke-2 kita ubah icon itu ke sprite (file image utuh) … nanti akan di generate sendiri oleh web itu menjadi code code css…  akan tercipta 2 file , png dan css nyah… kurang lebih hasilnya kayak gini:

sprite

Langkah III, kalo dari tutorial diatas kita disuruh perhatiin bbrpa point diantaranya:

  1. Gambar yang dibuat (generate) horizontal
  2. Horizontal Offset 5px
  3. Vertical Offset 5px
  4. Css Prefix rsp (terserah)

Kalo udah maka scriptnya akan keluar kayak gini:

.lang {
    background-image: url('image/url');
    background-repeat: no-repeat;
    display: block;
}
.lang-id { width: 16px; height: 11px; background-position: -5px -5px; }
.lang-us { width: 16px; height: 11px; background-position: -31px -5px; }

Langkah IV, kita mau integrasiin ke bootstrap,,, berikut codenyah (diambil dari script bootstrap):

/* icons */
[class^="rsp-"],
[class*=" rsp-"] {
  display: inline-block;
  width: 17px;
  height: 16px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("icons/bahasa.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
[class^="rsp-"]:last-child,
[class*=" rsp-"]:last-child {
  *margin-left: 0;
}

.lang-id { width: 16px; height: 11px; background-position: -5px -5px; }
.lang-us { width: 16px; height: 11px; background-position: -31px -5px; }

DONE!

Gampang kok… kalo mu demo langsung aja ke sumber nyah … ini demo dari sumbernyah:

http://favbulous.com/demo/twitter-bootstrap-custom-icons/

Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: