[Pitfall] iconfont exception bug, iconfontbug

[Pitfall] iconfont exception bug, iconfontbug

Have you ever seen the 'X' character on the html page become a printer icon? The average person should not.

----------------------- Weird bug -----------------------

Today, the test reported a bug, saying that 'X' on the page has changed to a printer and never encountered it before ~~

I looked at me. It's normal ~ I went to the Virtual Machine windows to check it again. It's also normal ~

 

Strange, start to go to Baidu. I found someone on Baidu knows to raise a question ~ The first answer is nonsense.

However, the reason for using the font is as follows.

(# ‵ ') Does have this bug? Next, I tried it quickly. However, this person also said.

 

Then go to google and check it out. After searching for half a day, only Baidu knows the case ~~ Continue, let's reproduce it by yourself.

 

----------------------- Stable reproduction -----------------------

Here, I will first talk about the bug mentioned in the test. There is no operation procedure ~~~~~ However, after ten minutes, I finally found a stable recurrence ~~~~ So how did the problem come?

 

1. Try to modify the element class and find that this problem occurs only after a class is used. All 'X' under the element will become a printer. There is a problem with this class.

2. mac OS and windows are consistent.

3. Check the iconfont library and find that there is no printer icon.

4. I suspect it is related to content. I changed the content attribute of the normal icon to x, which turns into a printer.

5. Combined with 3.4, we suspect that chrome has loaded the iconfont library settings by default, and regards 'X' as the iconfont content

6. Failed.

7. Consider iconfont's own problems. Capture packets and view font resources. After preview, capture the real culprit.

8. Go to another website (iconmoon) to check and confirm

 

9. Solve the problem. The iconfont rendering is incorrect. At half past one this afternoon, we have no choice but to replace the font package. Therefore, we should avoid this problem first.

 

Problem usage

<span class="iconfont">xxxxxx</span>

Modified usage

<span>xxxxxx<i  class="iconfont"></i></span>

 

That is to say, avoid using text in the iconfont element, and use the minimum element to process all icons.

 

 

This is a lot of nonsense. I think it is because the use of iconfont in the project is not well regulated ~~~~~~~~~

Tired ~~~ Several modules. Two or three usage methods ~~~ Wait for another day for code reconstruction and Optimization

Keep it for yourself

 

Conclusion:

Use the iconfont element to avoid text. Standardize iconfont usage ~

 

In addition, issue has been added to github. It will be fine after fixing.