[ExtJS Study Notes] section 5 Use fontawesome to add friendly icons to your web applications

[ExtJS Study Notes] section 5 Use fontawesome to add friendly icons to your web applications

Address: http://blog.csdn.net/sushengmiyan/article/details/38458411
Author: sushengmiyan
------------------------------------------------- Resource link --------------------------------------------------------
FontAwesome glyph encoding: http://fortawesome.github.io/Font-Awesome/cheatsheet/

Beautify the button with icons: http://blog.csdn.net/jfok/article/details/35994081

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

Bytes --------------------------------------------------------------------------------------------------------------------

Preparations:

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

1. Understand sencha cmd

2. Understand Ext JS 5

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

After the end of section 2, we can use sencha cmd to build a project. In general, there are many requirements on the website for artists, and everyone who looks comfortable is willing to do so. A program automatically constructed by using sencha cmd. A button is a common button and a common panel. If I want to add an icon to the button, will it be better? This section describes a simple method to add the icons provided by fontawesome to the ext js program.

Introduction to Font Awesome

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

Font Awesome is a popular Font icon tool. With the popularity of Bootstrap, it is gradually known that FontAwesome can not only be used on bt, but also be used in various web Front-end development. Compared with the traditional use of background images as icons, font icons mainly support adaptive and various font features (such as changing colors, becoming larger and smaller, and font shadows) reduce data loading and easier style definition.

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

Latest Version: 4.1

Use Font Awesome in Ext js

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

Using 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. Extract the file to the application directory.

After downloading the package, we can see a zip package like font-awesome-4.1.0.zip, decompress it, and see the following directory:

We only need the css directory and fonts directory.

Decompress the package to the application directory, that is, the. sencha folder. decompress the package as follows:

3. Introduce the css file into our project

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

4. Add icons for buttons and so on

Good. After the preparation is complete, add the nice icon to the program. First, modify the main. js file in the app \ view \ Main folder with me.

Open with editPlus, which is about 32 rows and 33 rows.

We changed the value of the button to save, and added a glyph attribute. The running effect is as follows:

5. Explain questions

For buttons and panels, the glyph attribute exists. We can use this attribute to add nice-looking icons to buttons and so on.

A string of verification codes is followed. How can we obtain this verification code?

Get glyph code: http://fortawesome.github.io/Font-Awesome/cheatsheet/

For each version of The cheatsheet page, we can find our favorite icon and compare it with the subsequent code.

Every Font Awesome 4.1.0 Icon, CSS Class, & Unicode: http: // fZ runtime? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> cipher + CjxwPgrI57n7y7WjrMO/tM62vLz8yOs =" xf0c7 @ FontAwesome 'suffix @ FontAwesome is cumbersome, you can specify the font format when loading the program.

For example, to add Ext. setGlyphFontFamily ('fontawesome ') to the initComponent function value in Mian. js, you can skip the suffix when using it later.

However, it should be noted that after this operation, the string format cannot be used, and it must be a number. For example:

Set the global font file

Simplified glyph Processing