Solution to the problem that the bootstrap icon cannot be displayed in firefox (ff), firefoxbootstrap

Solution to the problem that the bootstrap icon cannot be displayed in firefox (ff), firefoxbootstrap

Recently, I encountered a problem in a bootstrap-based project. The problem is that the built-in "glyphicon" icon cannot be displayed, A small square is displayed in the reference of the icon, and four seemingly hexadecimal characters are faintly visible in it ,:. Good-end, ready-to-use icons are useless, sad ~

 

However, chrome and IE 10 can be normally displayed, indicating that this problem is not caused by improper use or incorrect storage location of related files. In addition, this problem is not encountered in another project based on bootstrap of the same version ~~

 

Then I found a solution on the Internet and shared it here for your reference. In the address bar of ff, enter "about: config" to go to the configuration page. Search for "security. fileuri. strict_origin_policy". This value should be true. Double-click the item, and its value automatically changes to false. After the modification, refresh the page where the problem occurs and you will see the displayed icon.

 

What causes this problem? This is caused by a security policy of ff. This policy limits the access of HTML files to web fonts files that are not in the root directory. This restriction only occurs in the local development environment, and web fonts does not obtain it remotely.

 

Later, let's look at the bootstrap project mentioned above that has no problems. Sure enough, its fonts folder is placed under the root directory of the project. In this way, even if you do not change the above security policy, it will be displayed normally.