Awesome icon and css special font usage, awesomecss

Awesome icon and css special font usage, awesomecss

 

As the first blog post, I am about to get angry. Okay, I will not talk nonsense.

Yesterday, I found many of these Awesome icons in the project. I also found these files on the Internet after I downloaded the Font Awesome,

 

The current version is 4.2, and Font Awesome does not support IE7 any more since version 4.1.0, but earlier versions still support IE7. If you need to consider IE7, there are the following solutions:

I. First, copy the files under the css file to the css folder of our project. There is no doubt that the css style of the ossen icon is introduced in

 

 

I have a compressed version of ie7, but this file is not available in some places. This is because I still insist on using ie7 antiques. Just introduce it directly.

You can also use CDN for introduction.

 

2. Using the icon does not require much introduction. It corresponds to the osson icon website looking for a class, for example, <I class = "fa-wifi"> </I> the front fa must be followed by the class corresponding to the icon class.

3. Check the icons in the project .... View the Console

 

 

A bunch of errors show that the fonts folder is not found. I will say that I didn't introduce anything in fonts. Why is this error? I don't know.

It should be that the css file project that introduces Awesome will automatically search for the fonts folder, now I want to introduce the fonts folder to the project. (copy the folder directly to the project. Do not change the folder name. Yesterday, I changed the fonts folder name to font. I am so angry that I have been searching for this easy thing for a long time)

OK .. The icon appears successfully. The problem with the egg is that you must import the folder of the corresponding font.

 

CSS special font usage

Okay. The above icon solves the problem. Let's take a look at how to use it when a special font is introduced in the webpage,

The introduction of special fonts relies on the @ font-face statement to support these font browsers. As low as IE6/IE4, these fonts are well supported. Therefore, we should not consider compatibility issues.

There are four main formats (. eot,. woff,. svg, And. ttf). Why do four of them appear separately for different browsers? If they are too detailed, they will be introduced.

1. YourWebFontName: name of the downloaded font;

2. source: indicates the storage path of your Custom font, which can be relative or absolute;

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

4. weight and style: The width and style of the font.

 

OK... For example, download a raphaelicons font and the last fonts folder.

Two txt texts are not considered. There are four fonts. Now four fonts are introduced in the css style.

1 @font-face{2     font-family: 'Raphaelicons';3     src:url('fonts/raphaelicons-webfont.eot')format('eot');4     src:url('fonts/raphaelicons-webfont.svg')format('svg');5     src:url('fonts/raphaelicons-webfont.woff')format('woff');6     src:url('fonts/raphaelicons-webfont.ttf')format('truetype');7     font-weight: normal;8     font-style: normal;9 }

 

To celebrate .. The font has been successfully introduced into the style. Check the structure.

1 <div class="st-desc" data-icon="H"></div>

 

Note: For special fonts, data-icon = "" is required to define the icon. The corresponding H will become the icon of the font, And the css style will be defined.

1 [data-icon]:after{2     content: attr(data-icon);3     width: 200px;4     height: 200px;5     color: #fff;6     font-size: 90px;7     font-family: 'Raphaelicons';8     text-shadow:1px 1px 1px rgba(151,24,64,0.2);9 }

 

The key step is to use the font-family: "Raphaelicons" in the style. If the introduced font is not used, the style of the icon will not appear.

The definition of H in the nice-looking icon has become amazing ..

This is also true for the introduction of other special fonts. First, @ font-face introduces the font data-icon to define the font and define the data-icon style...