ExtJs – How To Use Font Awesome Icon In ExtJs

“Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
from http://fortawesome.github.io/Font-Awesome/

Font awesome adalah salah satu font iconic favorit saya, yang pastinya sering saya pakai dalam mengerjakan project-project baik untuk kepentingan pekerjaan kantor maupun pekerjaan pribadi.
Ukuran file kecil dan mudah untuk digunakan adalah salah satu kelebihan font awesome ini.
Untuk menggunakan di html pun sangat mudah hanya dengan tag :

<i class="fa fa-camera-retro"></i>

maka icon bisa langsung tampil.

Berikut saya share cara mudah mengaplikasikan font awesome di ExtJs.

Bila anda membuka website ini : http://extjs.eu/using-font-icons-in-ext-fontawesome/, maka anda bisa menggunakan font awesome dengan cara :

Ext.widget('button', {
     text:'Save'
    ,glyph:'xf0c7@FontAwesome'
});

atau bisa dengan cara :

Ext.setGlyphFontFamily('FontAwesome');
Ext.widget('button', {
     text:'Save'
    ,glyph:0xf0c7
});

Masalahnya sebenarnya font awesome sudah memberikan code name untuk masing-masing iconnya dan bisa kita panggil dengan memanggil css classnya saja tanpa perlu tau glyph code nya.
Untuk daftar lengkap code name bisa dilihat di http://fortawesome.github.io/Font-Awesome/icons/.
dan berikut cara yang biasa saya gunakan :

  xtype : 'button',
  text : 'Logout',
  style : 'color : black; ',
  iconCls : 'fa fa-power-off fa-lg'

Hanya saja mungkin butuh beberapa penyesuaian lagi di css ExtJs-nya agar icon bisa tampil di tempat yang pas sesuai dengan yang kita inginkan.
Berikut beberapa penyesuaian yang saya lakukan.
Saya mengguanakan theme grey, untuk penggunaan dengan theme lain mungkin akan berbeda penyesuaian yang mesti anda buat.

.x-btn-icon-el{
	padding-left: 2px;
	padding-top: 2px;
}
.x-btn-default-small .x-btn-inner{
	color : black;
}
.x-menu-item-icon, .x-menu-item-icon-right, .x-menu-item-arrow{
	padding-top: 4px;
	color : black;
}

Terima kasih dan semoga bermanfaat.
mazipan-signature

2 thoughts on “ExtJs – How To Use Font Awesome Icon In ExtJs

Be a good reader, leave your comment please.

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