Development notes,

Development notes,

Today, when I was writing a front-end page, I thought that font-awesome was simple and practical. Because the font-awesome icon library is very powerful, I made some more attempts on its css, this attempt found a fatal problem. When I used a uniform font size and a uniform font style for the I tag, I found that my webpage was displayed on different browsers, shown as follows:

 

QQ Browser:

The icon is displayed normally!

 

Google Chrome:

An error occurred while displaying the icon!

 

IE browser

 

An error occurred while displaying the icon.

 

Finally, I searched for the problem and summarized it here to prevent a pitfall from falling down twice:

According to the information, Google Chrome and IE9 do not support cross-origin access to the icon font ", you must configure the Header parameter "Access-Control-Allow-Origin" on the server where the font file is located to Allow the current domain name. In addition, after verification, you must set the parameter "Access-Control-Allow-Origin" to "*". the current domain name is not allowed. I do not know why. Here @ Chen https://www.cnblogs.com/freshman0216/p/3825166.html my article is equivalent to an example, haha.

 

It turned out to be a problem with cross-origin requests for browser resources.

Currently, mainstream browsers (including IE6) support CSS 3 custom fonts (@ font-face), so you can try to use font to replace various icons of the Image Display website. This advantage is because it is a vector, the amplification is not distorted, the size is small, the disadvantage is also very obvious, that is, the font at the same time can only be monochrome. If you want to use font-awesome to expand the icon, pay attention to the @ font-face font definition when setting its CSS style.

After the function is implemented, the screen is displayed on the QQ browser (left), but the font of Google, IE, or other browsers is not displayed (right ). The following error is reported on the Google browser console:Blocked cross-source requests: The same-source policy cannot be read.

 

So I stole my laziness without a network administrator. I simply removed the font of my custom I tag and solved the problem!

As shown in:

If you have encountered this problem, remove it if the project requirement has no special requirements for fonts!