How to use awesome icons and CSS special fonts

As the first blog post, I'm about to get blown up, okay, nonsense.

Yesterday in the project found a lot of these Awesome icons also found on the Internet under the font Awesome downloaded after these files,

The current version is 4.2,font awesome from 4.1.0 version is no longer supported IE7, but earlier versions are still supported, if necessary consider IE7 have the following workaround

First, the CSS file is copied to our project CSS folder, the introduction of the Orson icon in

I have a IE7 here under the compressed version, some places do not have this file, this is still in the insistence on the use of IE7 antique people, the direct introduction can be

Also can be introduced with CDN, the official website has introduced.

Two, use the icon this does not need too much introduction, corresponds to the Orson icon website to look for class, such as <i class= "FA Fa-wifi" ></i> before FA is required, the following class is the corresponding icon class

Third, look under the project The Egg hurts is the icon, where to go .... View the next console

A bunch of error, the display did not find fonts the font under this folder, I would say I did not introduce fonts inside the things ah why this error occurred, in fact, I do not know

should be introduced awesome CSS file project will automatically find fonts this folder, now put Fonts folder into the project (directly copy the folder to the project do not change the folder name yesterday is fonts changed to a font I wiped out so easy things so easy to find a long time)

Ok.. The icon has been successful, and the problem with the egg is that you must bring the corresponding font folder into good

How to use CSS special fonts

OK above this icon problem solved, and then look at the introduction of special fonts in the page to use the method,

The introduction of special fonts by @font-face statements to achieve these font browser support or good, low to ie6/ie4 are supported, very good, compatibility issues do not consider

The main format of four (. EoT,. Woff,. svg,. ttf), why there are four for different browsers are fragmented, not to mention that the introduction of the all-in-one, introducing a variety of

1,yourwebfontname: The name of the downloaded font;

2,source: This value refers to the storage path of your custom font, which can be a relative path or an absolute path;

3,format: This value refers to the format of your custom font, which means that the four formats mentioned above help various browsers identify

4,weight and styles: that is, the font's weight and style.

Ok... For example, download a raphaelicons font and download a Fonts folder

Two txt text is not considered, there are four fonts, now introduce four fonts in CSS style

To celebrate the next. The font has been successfully introduced into the style, look at the structure

Note: Special font use needs to use data-icon= "" to define the icon, the corresponding H will become the icon of the following font, define CSS style

The key step is to use the font font-family in the style: "Raphaelicons"; If you do not use the imported font, the style of the icon will not appear

The beautiful icons appear defined by the H into the wonderful bar.

The introduction of other special fonts is also the case, first @font-face introduced font data-icon definition font definition data-icon style using the font European card ...

How to use awesome icons and CSS special fonts