Please use Fontawesome instead of web icon small icons

1. Introduction

Web Small icons are everywhere, if a page is dry text and pictures, and no small icon, it will be very primitive. Below the small icon, you will often use?

You might say--"We're all colored, not black and white"--don't worry. Because they can also become colored.

Black and white or color, if you use the traditional "CSS + pictures" way to make these icons, I guess you have to hire a professional designer at least. General program Ape, including the front-end program ape, estimates can only go to search, not to take PS painting. For example, I used to go to a website called "Lazy People's library" to find resources, and now that site exists.

But the problem comes again, if you search for black and white, now also use black and white, post-site change theme how to do? What do you search for 16 * 16, to have a page that requires 32 * 32? If you think along this path, you will find yourself spending a lot of resources and energy on it.

But if I tell you, there is a thing, it has been prepared for you nearly 500 commonly used icon icons (still updated), can be small, can easily modify the color, completely open source, completely free, you will be tempted? If you are very anxious, first go to Baidu "Font-awesome", and then continue to read the article not later.

2. Application Font-awesome

Font-awesome the current version is 4.2.0, we will use this version directly.

2.1 Downloads

Go to http://www.thinkcmf.com/download, after decompression, you should be able to see "CSS" and "Font" two folders. The CSS folder contains CSS documents, which are stored in font files for different browsers. Among them, the CSS folder can keep only Font-awesome.min.css and font-awesome-ie7.min.css two documents, the other can be deleted. The structure should be as follows:

2.2 Simple Application

Add the Organized folder to your site, create a new test page demo.html, and bring the two CSS files in the CSS folder to the page.

<href= "Fontawesome-4.2.0/css/font-awesome.min.css"  rel= " Stylesheet "/><!--[if Ie]><link href=" fontawesome-4.2.0/css/ Font-awesome-ie7.min.css "rel=" stylesheet "/><! [EndIf]  -

For example, if it is an IE browser, you need to introduce font-awesome-ie7.min.css, because Fontawesome supports ie7+ browser . (Ay.) Why not extend to support IE6 ... )

After referencing the CSS file, you can then use the icon. For example, I want to display a "link" icon in the page, which I can write:

< span ><  class= "fa fa-link"></i> link </ span >

The page will now display:

The display is displayed, then the corresponding link of the CSS class "Fa-link" where did I find it?

The answer is very simple! Enter the official website of the icon page, there are all the icon CSS class, you can find the icon you want to the CSS class.

(Note that a "FA" class is added before "Fa-link", such as <i class= "FA fa-link" >)

2.3 Setting the size and color

Learn the simple use of the above, set the color and size is very simple, as long as you will use CSS to set the text color and size on the line. Look directly at the code:

<spanstyle= "FONT-SIZE:12PX;"><Iclass= "fa Fa-link"></I>Link</span><BR/><spanstyle= "font-size:20px;"><Iclass= "fa Fa-link"></I>Link</span><BR/><spanstyle= "Color:red"><Iclass= "fa Fa-link"></I>Link</span><BR/><spanstyle= "Color:white;background-color: #003399;"><Iclass= "fa Fa-link"></I>Link</span>

The result is:

So easy! So it looks like it's really a good thing.

2.4 Other applications

Fontawesome also has other more complex applications, including fixed-width, float, invert, rotate, overlay icons, and more.

The official online explanation is better, I will no longer repeat here, you can go to http://www.thinkcmf.com/font/examples to see examples of these applications.

3. Expansion

Know the reason why. But the purpose of this article is to apply, not to interpret, so I do not have a detailed understanding of this piece.

You can consult http://www.jb51.net/css/70033.html this article, there is the explanation of these principles, although not very deep, but enough to understand the use of.

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

Please pay attention to my Weibo.

Also welcome to follow my tutorials:

" from design to model"" deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

A rich text editor that supports inserting code--wangeditor

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

Please use Fontawesome instead of web icon small icons