Solution to the problem that the bootstrap icon cannot be displayed under firefox(ff)_html/css_WEB-ITnose

Recently I encountered a problem in a project based on bootstrap. The problem is that the set of icons named "glyphicon" that comes with bootstrap cannot be displayed. What is displayed at the reference of the icon is A small square with 4 seemingly hexadecimal characters vaguely visible inside, as shown in the picture:. The good, ready-made icons cannot be used, which is sad ~

But they can be displayed normally under chrome and IE 10, indicating that this problem is not due to improper use or storage location of related files. caused by errors. Moreover, I did not encounter this problem in another project based on the same version of bootstrap. Strange~~

I then searched for a solution on the Internet and share it here for everyone to encounter. Reference for those who have encountered the problem: Enter "about:config" in the address bar of ff to enter the configuration interface. Once inside, search for "security.fileuri.strict_origin_policy", which is the value that should be true. Double-click the item and its value will automatically change to false. After making the modification, refresh the page where you encountered the problem and you will see the icon displayed normally.

So what causes this problem? The reason is caused by a security policy of ff. This policy restricts HTML files from accessing web fonts in folders not located in the root directory. This limitation only occurs in the local development environment and the web fonts are not obtained remotely.

Then I looked at the bootstrap project mentioned earlier that had no problems. Sure enough, its fonts folder was placed in the root directory of the project. In this way, even if the above security policy is not changed, it can still be displayed normally.