zoukankan      html  css  js  c++  java
  • 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/去查看一下。

  • 相关阅读:
    第三十章 混合线程同步构造
    第二十九章 基元线程同步构造
    第二十八章 I/O限制的异步操作
    第二十七章 计算限制的异步操作
    第二十六章 线程基础
    第二十五章 与WinRT组件互操作
    css实现排序箭头
    js中的toFixed神坑
    react使用中碰到的小问题
    看到一个js中sleep的例子,挺好玩的
  • 原文地址:https://www.cnblogs.com/smxbo/p/12356591.html
Copyright © 2011-2022 走看看