欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

本地Bootstrap文件字體圖標(biāo)引入?yún)s無法顯示問題的解決方法

 更新時(shí)間:2020年04月18日 09:23:18   作者:Tiramisu_C  
這篇文章主要為大家詳細(xì)介紹了本地Bootstrap文件字體圖標(biāo)引入?yún)s無法顯示問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

你在使用bootstrap字體圖標(biāo)的時(shí)候,是否遇到引用本地Bootstrap文件無法顯示字體圖標(biāo),而使用CDN服務(wù)器上bootstrap卻能正常顯示的問題。

在不能正常顯示的時(shí)候,比如我要在一個(gè)按鈕中使用一個(gè)√的字體圖標(biāo),我的代碼是這樣子的:

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>bootstrap字體圖標(biāo)</title> 
 <link rel="stylesheet" href="../libs/bootstrap.css"> 
</head> 
<body> 
 <div class="container"> 
 <button class="btn"> <span class="glyphicon glyphicon-ok"></span></button> 
 </div> 
</body> 
</html> 

但是他的顯示卻是這個(gè)樣子的:

網(wǎng)上查找了很多解決辦法,說法不一。下面來看看我是如何解決的。

發(fā)現(xiàn)不能顯示之后我使用了goole cdn上的地址引入bootstrap文件,發(fā)現(xiàn)可以正常顯示。所以問題應(yīng)該出現(xiàn)在引入文件這里。
ctrl+左鍵進(jìn)入glyphyicon,發(fā)現(xiàn)實(shí)現(xiàn)的代碼是這樣的:

@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.woff2') format('woff2'), 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');
}
.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;

 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

在idea中就會(huì)發(fā)現(xiàn)@font-face這部分報(bào)紅,提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot,意思是找不到文件。
所以glyphyicon這個(gè)樣式,是關(guān)聯(lián)著這些文件的,進(jìn)入到下載的整個(gè)的壓縮包,進(jìn)入這個(gè)文件bootstrap-3.3.7-dist\fonts,就會(huì)發(fā)現(xiàn)如下文件:

所以glyphyicon這個(gè)樣式,必須要關(guān)聯(lián)到glyphicons-halflings-regular.eot等文件才能正常使用。
而在我的引用bootstrap文件中,我是這樣引用的,可能你也正在犯跟我一樣的錯(cuò)誤:
<link rel="stylesheet" href="../libs/bootstrap.css">

在webstrom中看到我的libs目錄是這樣的:

是的,在使用bootstrap的大多樣式的時(shí)候,單單是bootstrap.css這個(gè)文件就夠了,不必引入全部的,這樣可以讓我們的項(xiàng)目沒那么臃腫。但是在我們使用字體圖標(biāo)的時(shí)候,是需要關(guān)聯(lián)到字體圖標(biāo)相關(guān)的文件才得以實(shí)現(xiàn)的,所以當(dāng)我引入整個(gè)bootstrap-3.3.7(您也可以部分引入,只要將你想要的功能的相關(guān)文件全部引入且目錄無誤即可),然后再在我的html中這樣引入:
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">

這樣就能夠正常顯示字體圖標(biāo):

總結(jié):分析了那么多,意思就是字體圖標(biāo)這個(gè)樣式的實(shí)現(xiàn),需要關(guān)聯(lián)到glyphyicon相關(guān)文件,你在引入bootstrap.css文件時(shí),你要確保在與bootstrap.css的相對路徑下,能夠讓他找到這些關(guān)聯(lián)文件,而CDN服務(wù)器上的正式如此,如此才能讓圖標(biāo)正常顯示。

如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Listloading.js移動(dòng)端上拉下拉刷新組件

    Listloading.js移動(dòng)端上拉下拉刷新組件

    這篇文章主要介紹了Listloading.js移動(dòng)端上拉下拉刷新組件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-08-08
  • 最新JavaScript判斷是否是360瀏覽器方法

    最新JavaScript判斷是否是360瀏覽器方法

    這篇文章主要給大家介紹了關(guān)于最新JavaScript判斷是否是360瀏覽器方法的相關(guān)資料,我們在做項(xiàng)目的時(shí)候有用到判斷不同瀏覽器的這個(gè)需求,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
    2023-07-07
  • 如何在JavaScript中運(yùn)行.NET?Core代碼詳情

    如何在JavaScript中運(yùn)行.NET?Core代碼詳情

    這篇文章主要介紹了在JavaScript中運(yùn)行.NET?Core代碼詳情,DotNetJS可以將C#項(xiàng)目編譯為與任何環(huán)境兼容的單文件JavaScript庫,變可以在JavaScript中運(yùn)行.NET?Core代碼,相關(guān)操作分享詳情,需要的小伙伴可以參考一下
    2022-04-04
  • 關(guān)于遞歸運(yùn)算的順序測試代碼

    關(guān)于遞歸運(yùn)算的順序測試代碼

    關(guān)于遞歸運(yùn)算的順序測試代碼,需要的朋友可以參考下。
    2011-11-11
  • 百度地圖JavascriptApi Marker平滑移動(dòng)及車頭指向行徑方向

    百度地圖JavascriptApi Marker平滑移動(dòng)及車頭指向行徑方向

    本文主要介紹了百度地圖JavascriptApi Marker平滑移動(dòng)及車頭指向行徑方向的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-03
  • 解決LayUI表單獲取不到data的問題

    解決LayUI表單獲取不到data的問題

    今天小編就為大家分享一篇解決LayUI表單獲取不到data的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • fetch 如何實(shí)現(xiàn)請求數(shù)據(jù)

    fetch 如何實(shí)現(xiàn)請求數(shù)據(jù)

    這篇文章主要介紹了fetch 如何實(shí)現(xiàn)請求數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • JS字符串按逗號和回車分隔的方法

    JS字符串按逗號和回車分隔的方法

    下面小編就為大家?guī)硪黄狫S字符串按逗號和回車分隔的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-04-04
  • JS實(shí)現(xiàn)添加緩動(dòng)畫的方法

    JS實(shí)現(xiàn)添加緩動(dòng)畫的方法

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)添加緩動(dòng)畫的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • echart在微信小程序的使用簡單示例

    echart在微信小程序的使用簡單示例

    最近公司的項(xiàng)目中需要在小程序內(nèi)使用echarts組件來展示數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于echart在微信小程序的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02

最新評論