[ExtJS Study notes] section fifth use Fontawesome to add friendly icons to your web App

Address of this article:
This article Sushengmiyan
-------------------------------------------------Resource Link--------------------------------------------------------
Fontawesome Glyph Code: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Use the icon to beautify the button: http://blog.csdn.net/jfok/article/details/35994081

Use font awesome Icons in Ext js:http://extjs.eu/using-font-icons-in-ext-fontawesome/

--------------------------------------------------------------------------------------------------------------- -----

Pre-Preparation:

-------------

1. Understanding Sencha cmd

2. Learn about ext JS 5

You can complete http://blog.csdn.net/sushengmiyan/article/details/38313537 content to successfully enter this section of the study.

after the end of the second section, we can use Sencha cmd to build a project, in general, the site for the art requirements are more, looks comfortable online shop everyone is willing to. Using Sencha cmd to automatically construct the program, the button is a normal button, the panel is also a normal panel, if I want to add an icon to the button, is it better to look at it? This section describes a simple way to add an icon to the Ext JS program that Fontawesome provides.

about Font Awesome

--------------------------

Font Awesome is a popular icon tool for fonts. With the popularity of Bootstrap has gradually been recognized, now fontawesome not only can be used on BT, but also can be applied in various web front-end development. Compared with the traditional use of background image as an icon, the font icon is mainly to support adaptive, can use the various features of the font (such as color change, large and small, font shadow, etc.), reduce data loading, easier to define styles and so on.

Official website: http://fortawesome.github.io/Font-Awesome/

Latest Version: 4.1

using the Font Awesome in Ext JS

----------------------------------------

Using the font Awesome in ext is very simple, first we need to download the Font Awesome compressed package

1. Download the font awesome compressed package.

: Http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip

Click Download, or go to the official website to download the latest version.

2. Unzip the file to the application directory.

After the download, we can see font-awesome-4.1.0.zip such zip compressed package, unzip, you can see the following directory:

All we need is the CSS directory and the fonts directory.

Unzip to the application directory, which has the. Sencha folder in this directory, after I extract the following:

3. Introducing a CSS file into our project

Open the index.html file in your project and add the following code:

<link type= "Text/css" rel= "stylesheet" href= "Css/font-awesome.css" ">

4. Add icons to buttons, etc.

OK, get ready to finish, now add good-looking icons into the program, first with me to modify the Main.js file under the App\view\main folder

Open With EditPlus, about 32 rows and 33 rows.

We changed the value of the button to save and then added a glyph property, which would work as follows:

5. Doubts and explanations

For buttons and panels, there are glyph this property, we can use this property to the button and other good-looking icons.

followed by a string of character code, this character code how do we get it?

For each version of the Cheatsheet page, we come here to find our favorite icons, and then compare to the back of the loadline can be.  

Every Font Awesome 4.1.0 Icon, CSS Class, & unicode:http://fortawesome.github.io/font-awesome/cheatsheet/