解决Bootstrap字体图标glyphicon无法显示的问题
生活随笔
收集整理的這篇文章主要介紹了
解决Bootstrap字体图标glyphicon无法显示的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們在官網下載了Bootstrap3版本的文檔使用時，在我們將bootstrap.min.css文件引入到自己Web項目中，使用字體圖標glyphicon時，圖標無法正常顯示，例如:
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>test</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-theme.min.css" /><script src="js/jquery-2.1.1.min.js"></script><script src="js/bootstrap.min.js"></script></head><body><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">Test</a></div><ul class="nav navbar-nav navbar-right"><li><a href="#"><span class="glyphicon glyphicon-user"></span> 注冊</a></li><li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li></ul></div></nav></body> </html>顯示出來的卻是這樣的結果：
而在Web項目中直接引用官網的bootstrap.min.css文件，卻能正常顯示，代碼如下：
字體圖標顯示出來了:
原因是：我們在把下載好的bootstrap文檔中css目錄下的bootstrap.min.css文件引入自己的Web項目中時，該文件的路徑就變了，變成了我們所放的路徑，由于Bootstrap對這些文件存放路徑的規定，css文件要與fonts文件相對同級，而在我們的Web項目中，找不到原來該css文件所對應的字體fonts文件了，會出現如下報錯：
此時，只要將bootstrap-3.3.7\dist目錄下的fonts文件夾全部拷貝盡自己的Web項目中，注意要將fonts文件夾與css文件夾同級放置，然后就能顯示出字體圖標了。
總結
以上是生活随笔為你收集整理的解决Bootstrap字体图标glyphicon无法显示的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 硅麦的音频放大器
- 下一篇： 如何证明圆锥面积=1/3圆柱面积？