bootstrap4中bootstrap_treeview不顯示圖標原因以及解決辦法


1.bootstrap4中bootstrap_treeview不顯示圖標原因

  查看過大神的博客,經過自己試驗,插件依賴:

bootstrap/3.3.7
jquery/3.3.1
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
 因為插件用了版本3的圖標,而bootstrap 4卻把圖標和插件分離了,因此需要手動添加這些圖標文件。
 (1)但是經過查看“菜鳥教程”中的bootstrap教程,bootstrap4之前的字體圖標使用的是“Glyphicons Halfings”,下載網址為https://glyphicons.com/,查看過之后發現該圖標文件為收費文件。

  

  (2)后來發現bootstrap中還可以引用fontawesome字體圖標,下載網址為http://fontawesome.dashgame.com/

    下載之后加入到與css、js同級的目錄位置,通過在css中引用如下代碼:

 1 @font-face {
 2       font-family: 'FontAwesome';
 3       src:  url('../font/bootstrap/glyphicons-halflings-regular.eot');
 4       src:  url('../fontawesome-free-5.12.1-web/webfonts/fa-brands-400.eot') format('embedded-opentype'),
 5         url('.../fontawesome-free-5.12.1-web/webfonts/fa-brands-400.ttf') format('truetype'),
 6         url('../fontawesome-free-5.12.1-web/webfonts/fa-brands-400.woff') format('woff'),
 7         url('../fontawesome-free-5.12.1-web/webfonts/fa-brands-400.woff2') format('woff2'),
 8         url('../fontawesome-free-5.12.1-web/webfonts/fa-brands-400.svg') format('svg');
 9       font-weight: normal;
10       font-style: normal;
11   }
12 }

  (3)如果需要的只是少數的圖標圖片,可以到https://www.iconfont.cn/去查看一下。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM