1. 首頁 > 生活 > >

bootstrap小圖標的類名 bootstrap icon圖標

小知識bootstrap ic



文章插圖
bootstrap小圖標的類名 bootstrap icon圖標

文章插圖
經歷了 5 個 alpha 版本后 ， Bootstrap Icons 已于近日正式發布 v1.0.0 穩定版 。目前該圖標庫已擁有超過 1100 個圖標 ， 團隊計劃在即將發布的小版本中再為其增加數百個圖標 。
自第五個 alpha 版本發布以來 ， 團隊已經重新繪制了超過三分之一的圖標 ， 主要是因為對路徑和形狀進行了微調 。這里的大部分重繪和改進都是為圖標字體(icon font)做準備 ， 但遺憾的是 ， 由于從 SVG 生成字體的工具未夠完善 ， 所以圖標字體被推遲到了 v1.1.0 版本 。
安裝
通過 npm 安裝：
npm i bootstrap-icons或者從 GitHub 下載新版本 ， 或僅下載 SVG 文件（不包含倉庫的其他文件） 。
用法
根據自己的設置 ， 可以通過多種方式將 Bootstrap Icons 添加到項目：
將 SVG 復制粘貼為內嵌式的 HTML 元素
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>通過<img>元素引用
<img src="http://www.mnbkw.com/assets/img/bootstrap.svg?x83982" width="32" height="32" title="Bootstrap">使用 SVG sprite
<svg class="bi" width="32" height="32" fill="currentColor"><use xlink:/></svg><svg class="bi" width="32" height="32" fill="currentColor"><use xlink:/></svg><svg class="bi" width="32" height="32" fill="currentColor"><use xlink:/></svg>通過 CSS 引入
【bootstrap小圖標的類名 bootstrap icon圖標】.bi::before {display: inline-block;content: "";background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");background-repeat: no-repeat;background-size: 1rem 1rem;}