可用的图标: 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>
<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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
2019-08-16 在wcharczuk/go-chart图表上打印文字