导航

BootStarp的图标

Posted on 2022-08-16 20:05  蝈蝈俊  阅读(180)  评论(0)  编辑  收藏  举报

可用的图标: https://icons.getbootstrap.com/

使用方式1: 引用全部图标CSS

<!-- 引用 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

<!-- 使用 -->
<i class="bi bi-graph-up-arrow"></i>
<i id='sidebarCollapseicon' class="bi bi-text-indent-right"></i>

<!-- 用脚本替换 -->
<script type="text/javascript">
      var element = document.getElementById("sidebarCollapseicon");
      element.classList.toggle("bi-text-indent-left");
      element.classList.toggle("bi-text-indent-right");
</script>

使用方式2:按需使用


<body>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="graph-up-arrow" viewBox="0 0 16 16">
            <path d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/>
        </symbol>  
        <symbol id="text-indent-right" viewBox="0 0 16 16">
            <path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm10.646 2.146a.5.5 0 0 1 .708.708L11.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zM2 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
        </symbol>
        <symbol id="text-indent-left" viewBox="0 0 16 16">
            <path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm.646 2.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L4.293 8 2.646 6.354a.5.5 0 0 1 0-.708zM7 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
        </symbol>
    </svg>

   <a href="/" class="d-flex align-items-center mb-3 text-decoration-none">
       <svg class="bi"  width="32" height="32"><use xlink:href="#graph-up-arrow"/></svg>&nbsp;
       <span class="fs-4">架构度量</span>
   </a>
   
   <button type="button" id="sidebarCollapse" class="btn btn-info">
       <svg  class="bi" width="16" height="16"><use id='sidebarCollapseicon'  xlink:href="#text-indent-right"/></svg>
       <span class="visually-hidden">导航</span>
   </button>   

   <script type="text/javascript">
       var element = document.getElementById("sidebarCollapseicon");
       console.log(element);
       curr = element.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
       console.log(curr);
       if (curr == "#text-indent-right") {
           element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#text-indent-left");
       }else{
           element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#text-indent-right");
       }
   </script>
</body>
</html>