BootStrap table 圖標顯示問題引發的一系列問題

先上圖效果

初學bootstrap table,現上引用,有本地、有在線的,還未整理,不喜歡在線引用的同學可以訪問在線的網址,右鍵另存爲即可

CSS:圖標相關引用信息在bootstrap.min.css中,你可以搜索glyphicon查看

<link rel="stylesheet" type="text/css"href="../../assets/css/bootstrap.min.css">
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">

JS:前兩個不必說,後面四個我是從bootstrap-table示例扒來的https://examples.bootstrap-table.com/

<script type="text/javascript"src="../../assets/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../../assets/js/bootstrap.min.js"></script>

<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"</script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table-locale-all.min.js"></script>  
<script type="text/javascript" src="../../assets/js/dataTables/bootstrap-table-export.js"></script>

關於書寫table的代碼網上很多,自不必說

問題:只有列的圖標可以顯示,其他refresh、export的圖標都不顯示;

(寫文章時錯誤已改正,這張圖是盜圖https://blog.csdn.net/darer49/article/details/87862541,關於fonts的也可以看一下他的表述)

一層一層來說,先說table自帶的圖標refresh爲什麼不顯示,它是通過bootstrap.min.css中的url來指定的,url指向的是fonts文件,

1、確保有fonts文件,另外目錄和css同一級別;https://download.csdn.net/download/u010763324/12331503

2、如果有文件,位置對,那是不是bootstrap.min.css寫錯了呢? 答案是肯定的

在bootstrap.min.css文件中CTRL+F 搜索以下信息

refresh:"glyphicon-refresh icon-refresh"

引號內的圖標沒找到,應改爲

refresh:"glyphicon glyphicon-refresh"

爲什麼這樣寫?請看https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm,名稱間的小點點忽略,想用哪張圖自己隨便。

這就是爲什麼我們代碼中會有如下一些示例,其實找圖標去了

<span class="glyphicon glyphicon-search"></span>

Refresh說完了,其他自帶的也就說完了,這下來看看Export,導出表格是拓展的功能

自然去bootstrap-table-export.js搜索glyphicon

說得對,改成剛剛說的方式,我圖中已經改好了,其他就沒什麼好說的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章