Bootstrap字體圖標無法正常顯示的解決方法
更新時間：2016年10月08日 14:24:42 作者：helijun
這篇文章主要為大家詳細介紹了Bootstrap字體圖標無法正常顯示的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
bootstratp作為一個優(yōu)秀的前端框架，最近使用了其中的Glyphicon Halflings的字體圖標。起初一直顯示不出來，后面通過搜索相關(guān)資料直到成功顯示，在此做一些總結(jié)，方便后面復習。
1、在html頁面引入bootstrap
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xxxx</title> <link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet"> </head> <body> </body> <script src="../js/lib/jquery.min.js" type="text/javascript"></script> <script type="../js/lib/bootstrap.min.js" type="text/javascript"></script> </html>
2、在放bootstrap.min.css的文件夾同級的目錄下添加官網(wǎng)下載好的fonts文件里的所有東西
3、在項目的/img/文件下添加（關(guān)鍵）
glyphicons-halflings-white.png
glyphicons-halflings.png
4、使用
放在任何地方都能使用。為了留下正確的內(nèi)補（padding），一定要在圖標和文本之間加上一個空格。圖標 class 不能和其它元素聯(lián)合使用，因為這些圖標被設計為獨立的元素、獨立使用。
<span class="glyphicon glyphicon-search"></span>
參考鏈接：http://v2.bootcss.com/base-css.html#icons
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰(zhàn)教程
相關(guān)文章
input type=file 選擇圖片并且實現(xiàn)預覽效果的實例
下面小編就為大家?guī)硪黄猧nput type=file 選擇圖片并且實現(xiàn)預覽效果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了純JS將table表格導出到excel的方法,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09
JavaScript的Array對象有一個sort方法，用于實現(xiàn)對數(shù)組元素的排序，該方法默認按照數(shù)組項ASCII 字符順序升序排列。這篇文章重點給大家介紹js模擬實現(xiàn)Array的sort方法，一起看看吧2007-12-12
這篇文章主要給大家介紹了關(guān)于JavaScript滑動驗證功能實現(xiàn)的相關(guān)資料,滑動拼圖驗證功能是一種常見的網(wǎng)站人機驗證方法,旨在防止惡意機器人或自動化程序?qū)W(wǎng)站進行惡意攻擊,需要的朋友可以參考下2024-06-06
動態(tài)加載js、css等文件跨iframe實現(xiàn)
這篇文章主要介紹了動態(tài)加載js、css等文件跨iframe實現(xiàn)的方法,需要的朋友可以參考下2014-02-02
JavaScript實現(xiàn)DIV層拖動及動態(tài)增加新層的方法
這篇文章主要介紹了JavaScript實現(xiàn)DIV層拖動及動態(tài)增加新層的方法,設計javascript操作div層的拖動與增加的相關(guān)技巧,需要的朋友可以參考下2015-05-05
WXSS(WeiXin?Style?Sheets)是一套樣式語言,用于描述?WXML?的組件樣式,下面這篇文章主要給大家介紹了關(guān)于微信小程序WXSS和全局、頁面配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
正如標題所言使用js如何判斷不同系統(tǒng)的瀏覽器類型，下面有個不錯的示例，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了WebView啟動支付寶客戶端支付失敗的問題小結(jié)的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼
JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼，需要的朋友可以參考下。2011-06-06