BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法
bootstrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示解決辦法如下所示：
分享供各位參考：
1、在ff/http:的地址欄中輸入“about:config”，即進(jìn)入配置界面。
2、進(jìn)入后，搜索“security.fileuri.strict_origin_policy”，這是該值應(yīng)該是true。
3、雙擊該項(xiàng)，其值自動(dòng)變?yōu)閒alse，即可。
4、修改后，再刷新遇到問題的頁面，即可看到正常顯示的圖標(biāo)了。
探究問題原因：
1、由于ff/http:一個(gè)安全策略導(dǎo)致的。該策略限制了HTML文件訪問不在根目錄下的文件夾中的web fonts。
2、這種限制只在本地開發(fā)環(huán)境下，同時(shí)web fonts并未從遠(yuǎn)程獲取時(shí)出現(xiàn)。
3、后來看了下前面提到的那個(gè)沒有出現(xiàn)問題的bootstrap項(xiàng)目。
4、果然，其fonts文件夾被放置在了項(xiàng)目的根目錄下。
5、這樣即使不去改變上述安全策略，也是可以正常顯示的。
6、@font-face地址：
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
以上所述是小編給大家介紹的BootStrap 圖標(biāo)icon符號(hào)圖標(biāo)glyphicons不正常顯示的快速解決辦法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本文給大家總結(jié)了javascript中的循環(huán)遍歷，給大家總結(jié)的非常全面，感興趣的朋友跟隨小編一起看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于手撕javascript繼承的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JS中postcss插件實(shí)現(xiàn)vw適配的方法
PostCSS是一個(gè)用JavaScript編寫的插件工具,它可以幫助我們對(duì)CSS進(jìn)行模塊化、自動(dòng)化處理和優(yōu)化,這篇文章主要介紹了JS中postcss插件實(shí)現(xiàn)vw適配,需要的朋友可以參考下2025-01-01
跨瀏覽器開發(fā)經(jīng)驗(yàn)總結(jié)（四） 怎么寫入剪貼板
讓你的操作剪切板的操作支持多瀏覽器，一般IE,Firefox2010-05-05
這篇文章主要為大家詳細(xì)介紹了javascript輪播圖算法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript實(shí)現(xiàn)三種常用網(wǎng)頁特效(offset、client、scroll系列)
這篇文章主要為大家介紹了三種常用的PC端網(wǎng)頁特效：元素偏移量offset系列，元素可視區(qū)client系列和元素滾動(dòng)scroll系列，文中示例代碼介紹詳細(xì)，需要的可以參考一下2021-12-12
Div上下居中...2007-02-02
JavaScript Ajax實(shí)現(xiàn)異步通信
這篇文章主要為大家詳細(xì)介紹了JavaScript Ajax實(shí)現(xiàn)異步通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JS前端接口防止重復(fù)請(qǐng)求的三種實(shí)現(xiàn)方案
前段時(shí)間心血來潮,想把項(xiàng)目的前端都做一下接口防止重復(fù)請(qǐng)求的處理,雖然大部分的接口處理我們都是加了loading的,但又不能確保真的是每個(gè)接口都加了的,下面就來總結(jié)一下這次的防重復(fù)請(qǐng)求的實(shí)現(xiàn)方案,需要的朋友可以參考下2024-03-03
淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11