Results 1 to 10 of 15

Thread: Font Awesome

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,528
    Vote Rating
    353
      4  

    Default Font Awesome

    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:

    Selection_001.png

    Works in 2.1 and 2.2 beta.

    Hope this be useful for someone.

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 - 6
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    146
      1  

    Default

    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
    @aconran

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    New Zealand
    Posts
    145
    Vote Rating
    58
      0  

    Default

    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.

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    9
    Vote Rating
    1
      0  

    Default

    Hi,

    how did you center your icon, did you use iconmask - x-icon-mask?

    I get a white square when I used the iconmask...

    Thanks!

  5. #5
    Sencha User
    Join Date
    Nov 2007
    Posts
    52
    Vote Rating
    0
      0  

    Default

    Thx

    I use iconCls: "icon-save icon-border"

    Should center it

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
      0  

    Default Sub Menus

    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?

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    56
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by ryeo View Post
    Hi,

    how did you center your icon, did you use iconmask - x-icon-mask?

    I get a white square when I used the iconmask...

    Thanks!
    you can modify the property in the font-awesome.css like below. This will change across the all font. you can also do individual font css with using override

    .fa {
    display: inline-block;
    margin-top: 4px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #C4E5EE;
    }

  8. #8
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,528
    Vote Rating
    353
      0  

    Default

    Use glyph property with the hex code of the font, for example:

    Code:
    ...
    glyph: "xf0f3@FontAwesome"
    ...
    UI: Sencha Architect 3.x / ExtJS 4 - 6
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •