7 Dec 2012 9:01 AM #1
I recently finished a JSF 2 application + Twitter Bootstrap (http://twitter.github.com/bootstrap/) + Font Awesome (http://fortawesome.github.com/Font-Awesome/).
I really like the way final application looks and now I feel that ExtJS applications's UI looks too "dense" and too 90s... (colors, frames, etc.) so I start to use default gray theme and start to tweak, via CSS, the L&F.
One of the thing I liked the most in the JSF application was the icons provided with Font Awesome so I decided to try them in SA. Was really easy!
1. Create a new project and save it.
2. Add "fonts" and "css" folders to where you saved your SA application.
3. Copy "fonts" folder content from Font Awesome distribution to SA application's "font" folder.
4. Copy "css" folder content from Font Awesome distribution to SA application's "css" folder.
5. Add a resource to your app pointing to "./css/font-awesome.css"
6. Use the icon-* classes, for example:
Works in 2.1 and 2.2 beta.
Hope this be useful for someone.
Regards.UI: Sencha Architect 2.x / ExtJS 4 MVC
Server side: EJB 3.1 / CDI / JPA 2 / JAX-RS / JasperReports
Application Server: Glassfish 3.1.x
Databases: Oracle 10g & 11g / DB2 9 & 10 / Firebird 2.5
If you like my answer please vote!
7 Dec 2012 9:58 AM #2
Thanks for the writeup. I'm sure this will help someone out.
The Ext JS Team is aware of the dated look of our current theme and doing something to revamp that.Aaron Conran
Sencha Architect Development Team
8 Dec 2012 9:35 PM #3
Thanks for this - I too have used the default gray css as a starting point - first step is to dump all the gradients and radius borders - instant modern and clean theme! I am not far off the task of adding some graphical touches to buttons, tabs, etc and Font Awesome does indeed look awesome, so thanks muchly for the tip. Cheers.
22 Jan 2013 3:02 PM #4
how did you center your icon, did you use iconmask - x-icon-mask?
I get a white square when I used the iconmask...
25 Jan 2013 12:49 PM #5
I use iconCls: "icon-save icon-border"
Should center it
13 Oct 2013 3:36 PM #6
Did you get this working with Menu components? They use an img element so the icon-X classes don't work..
Any ideas how to make the icons in menus render as divs instead?