Font Awesome

Font Awesome 是一套專門爲 Twitter Boostrap 設計的圖標字體庫。這套圖標字體集幾乎囊括了網頁中可能用到的全部圖標，除了包括 Twitter Boostrap 的默認圖標外，還有社交網絡圖標、Web 應用程序圖標和編輯器圖標等等，能夠免費用於商業項目。

主要特點：

✓  一種字體，249個圖標，是網頁操做的象形語言；

✓  純 CSS 控制，可以輕鬆定義圖標的顏色、大小、陰影以及任何 CSS 可以實現的效果；

✓  無限縮放，矢量圖標在任何尺寸下都如出一轍；

✓  無償使用，包括商業和非商業項目；

✓  支持 Internet Explorer 7 瀏覽器；

✓  可以在 Retina 屏幕完美呈現；

✓  徹底兼容 Twitter Boostrap 最新版本；

✓  對設計師友好，設計師可以輕鬆使用；

✓  和其它圖標字體不一樣，兼容屏幕閱讀器；

Every application or operating system needs icons, small images symbolizing concepts or actions that are easier to recognize and locate than written texts. They used to be 16x16 pixels but with increased screen resolutions like retina displays we need much bigger images: 64x64, 256x256 or even higher. The 'ole good 16x16 just do not look good anymore.

The idea of font icon is simple: fonts are not bitmap images but vector shapes so if we draw a shape and assign it to a character in a font we get scalable and resolution independent icon that looks good at any size. So that's font icon.

1. What is an Icon Font?

Sure, one icon is not enough, and a couple of special glyphs in standard fonts as Arial also won't do designers and developers put together collections of useful shapes, icons into specialized fonts, icon fonts.

If you google for "icon font" you find many of them, they are increasingly popular. Here is the list of a few of them:

• FontAwesome
• IcoMoon
• Fontello
• Entypo
• ionicons
• Iconic
• Pictonic
• Typicons

2. How to use FontAwsome?

Take a look at all icons at FontAwesome site. There are about 370 icons in 8 categories, the selection that should be enough for a majority of applications.

Each icon has a symbolic name that is CSS class in fact. If you click on an icon, you see the icon details. The most important information is:

• Unicode number, e.g. f14e for fa-compass

• HTML markup to show an icon, e.g.

  <i class="fa fa-compass"></i>

拷貝 Font Awesome 字體目錄到項目中；

拷貝 font-awesome.min.css 文件到項目中；

修改 font-awesome.min.css 文件中的字體路徑到正確的位置；

在頁面的 head 裏引入 font-awesome.min.css 文件：

<link rel="stylesheet" href="../css/font-awesome.min.css">

3. Using FontAwesome in Ext application

The aforementioned way is fine for showing icons in text but in Ext we want icons in headers, buttons, menu items, etc. How to go about that?

Fortunately, it's very easy. Many components have configuration option glyph that takes unicode of the icon plus the optional font family name. That is enough to show the font icon (besides including the font stylesheet in the head).

Button configuration would then look like this:

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

Ext.widget('panel', {
     title:'Info Panel'    
     ,border:true
    ,glyph:'xf05a@FontAwesome'
});

Nobody likes too much typing of font name in every glyph so we would rather call

Ext.setGlyphFontFamily('FontAwesome');

early in app.js (init or launch method of Application).

The we would then configure our button and panel like this:

Ext.widget('button', {
     text:'Save'
    ,glyph:0xf0c7
});
 
Ext.widget('panel', {
     title:'Info Panel'
    ,border:true
    ,glyph:0xf05a
});

Important: Mind that the type of glyph in the above code is number, not string. The global glyph font family is ignored if glyph type is string.