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)合使用，因為這些圖標被設(shè)計為獨立的元素、獨立使用。
<span class="glyphicon glyphicon-search"></span>
參考鏈接：http://v2.bootcss.com/base-css.html#icons
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰(zhàn)教程
相關(guān)文章
Javascript的promise,async和await的區(qū)別詳解
這篇文章主要為大家詳細介紹了Javascript的promise,async和await的區(qū)別，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了微信小程序swiper組件用法,結(jié)合實例形式分析了微信小程序中swiper組件的功能、使用方法,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
在前端開發(fā)中,我們經(jīng)常需要實現(xiàn)文件下載功能,例如下載用戶上傳的圖片、用戶生成的文件等,這篇文章主要給大家介紹了關(guān)于如何通過1分鐘快速了解js實現(xiàn)下載文件功能的4種方式,需要的朋友可以參考下2024-03-03
js中的preventDefault與stopPropagation詳解
本篇文章主要是對js中的preventDefault與stopPropagation進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細介紹了js利用iframe實現(xiàn)選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家介紹了wow.js實現(xiàn)炫酷的頁面滾動伴隨動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡易計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了JS使用cookie設(shè)置樣式的方法,涉及javascript樣式的設(shè)置與cookie的讀寫相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JS控制日期顯示的小例子，有需要的朋友可以參考一下2013-11-11
javascript 簡單抽屜效果的實現(xiàn)代碼，需要的朋友可以參考下，大家自行測試。2010-03-03