：SVG 結(jié)構(gòu)、字體碼點(diǎn)與完整使用指南)
前端【免費(fèi)下載鏈接】iconsOfficial open source SVG icon library for Bootstrap.項(xiàng)目地址https://gitcode.com/gh_mirrors/ic/icons點(diǎn)擊查看免費(fèi)下載file-earmark-bar-graph文件-角標(biāo)-柱狀圖是 Bootstrap Icons 開源 SVG 圖標(biāo)庫(kù)中「Files and folders文件與文件夾」分類下的一個(gè)代表性圖標(biāo)用于表達(dá)“包含數(shù)據(jù)圖表的文檔”這一語義。本文以倉(cāng)庫(kù)中的 文檔頁、SVG 源文件 及其 Fill 變體為據(jù)深入講解該圖標(biāo)的視覺構(gòu)成、雙變體差異、字體碼點(diǎn)以及嵌入 HTML、SVG Sprite、圖標(biāo)字體等全套使用方式幫助你把它正確接入 Bootstrap 項(xiàng)目。圖標(biāo)基本信息與文檔結(jié)構(gòu)在倉(cāng)庫(kù)中每個(gè)圖標(biāo)對(duì)應(yīng)docs/content/icons/下的一個(gè) Markdown 文檔file-earmark-bar-graph的文檔內(nèi)容如下--- title: File earmark bar graph categories: - Files and folders tags: - doc - document - data - chart ---這份 Front Matter 定義了三個(gè)關(guān)鍵元信息titleFile earmark bar graph即該圖標(biāo)在文檔站點(diǎn)上的展示名稱categoriesFiles and folders將該圖標(biāo)歸入「文件與文件夾」分類tagsdoc、document、data、chart分別對(duì)應(yīng)「文檔」「數(shù)據(jù)」「圖表」等檢索關(guān)鍵詞便于按語義篩選圖標(biāo)。這些元數(shù)據(jù)在站點(diǎn)生成時(shí)會(huì)被真正消費(fèi)文檔列表模板 docs/layouts/partials/icons.html 通過data-tags、data-categories屬性把分類與標(biāo)簽輸出到搜索過濾器而詳情頁模板 docs/layouts/icons/single.html 則在標(biāo)題下方直接渲染 Tags 與 Category 列表。也就是說當(dāng)你需要表達(dá)“一份包含統(tǒng)計(jì)柱狀圖的文檔文件”時(shí)按file-earmark-bar-graph這個(gè)語義關(guān)鍵詞即可檢索到本圖標(biāo)。圖標(biāo)設(shè)計(jì)解讀折角文檔 三根數(shù)據(jù)柱file-earmark-bar-graph的矢量圖形定義位于 icons/file-earmark-bar-graph.svg完整內(nèi)容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph viewBox0 0 16 16 path dM10 13.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ path dM14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z/ /svg可以從 SVG 源碼層面拆解它的視覺構(gòu)成標(biāo)準(zhǔn)畫布width16 height16、viewBox0 0 16 16與 Bootstrap Icons 全庫(kù)統(tǒng)一的 16×16 網(wǎng)格一致保證與其他圖標(biāo)并排時(shí)尺寸協(xié)調(diào)著色方式fillcurrentColor意味著圖標(biāo)顏色完全繼承父元素的color無需額外指定即可跟隨主題切換第一條 path數(shù)據(jù)柱繪制三根高度遞減的柱狀條——左側(cè)柱高 2 個(gè)單位v-2中間柱高 4 個(gè)單位v-4右側(cè)柱高 6 個(gè)單位v-6自上而下形成典型的“數(shù)據(jù)趨勢(shì)”視覺語言第二條 path文檔本體采用“折角文檔earmark”輪廓——左下角圓角矩形 右上角折角。路徑從M14 14V4.5L9.5 0開始表示折角位于文檔右上角這正是earmark系列圖標(biāo)共有的特征。從源碼結(jié)構(gòu)可以推斷earmark右上折角用于標(biāo)識(shí)“這是一個(gè)帶附加元數(shù)據(jù)的文件”而內(nèi)部的柱狀圖形則表達(dá)“該文件包含統(tǒng)計(jì)圖表/數(shù)據(jù)”二者結(jié)合即構(gòu)成「數(shù)據(jù)圖表文檔」的完整語義。雙變體Outline 與 Fill與 Bootstrap Icons 中大多數(shù)圖標(biāo)一樣file-earmark-bar-graph提供輪廓Outline與實(shí)心Fill兩個(gè)變體后者見 icons/file-earmark-bar-graph-fill.svgsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph-fill viewBox0 0 16 16 path dM9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1m.5 10v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5m-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ /svg兩個(gè)變體的對(duì)比要點(diǎn)Fill 變體將文檔輪廓合并為實(shí)心色塊H4a2 2 0 0 0-2 2v12...右上折角處多了「撕角」造型M9.5 3.5v-2l3 3h-2折角區(qū)域留白三根數(shù)據(jù)柱在兩種變體中高度與位置完全一致右側(cè)柱v-6、中間柱v-4、左側(cè)柱v-2保證切換變體時(shí)圖形骨架不漂移命名上統(tǒng)一遵循名稱與名稱-fill的倉(cāng)庫(kù)約定同組的file-earmark-*系列arrow、binary、break、check 等均采用該規(guī)則。選擇建議頁面整體使用實(shí)心圖標(biāo)如導(dǎo)航高亮、主按鈕時(shí)優(yōu)先-fill變體需要輕量線框質(zhì)感如輔助說明、占位符時(shí)使用 Outline 變體。字體碼點(diǎn)從 JSON 到 CSS/JS/HTML除直接使用 SVG 外Bootstrap Icons 還以圖標(biāo)字體形式發(fā)布。倉(cāng)庫(kù)通過 font/bootstrap-icons.json 記錄每個(gè)圖標(biāo)的 Unicode 碼點(diǎn)file-earmark-bar-graph-fill: 62297, file-earmark-bar-graph: 62298數(shù)值 62297 / 62298 轉(zhuǎn)換為十六進(jìn)制即為UF359-fill與UF35A常規(guī)與字體樣式表 font/bootstrap-icons.css 中的映射完全一致.bi-file-earmark-bar-graph-fill::before { content: \f359; } .bi-file-earmark-bar-graph::before { content: \f35a; }據(jù)此你可以用四種等價(jià)方式引用碼點(diǎn)場(chǎng)景寫法結(jié)果CSScontent: \f35aUF35AJavaScript\uF35AUF35AHTML 實(shí)體#xF35A;UF35AUnicode 字面量UF35AUF35A注意碼點(diǎn)落在 Unicode 私有使用區(qū)Private Use AreaPUAUF000 起僅當(dāng)頁面加載了 Bootstrap Icons 字體文件font/bootstrap-icons.woff2 與 font/fonts/bootstrap-icons.woff時(shí)才能正確渲染單獨(dú)復(fù)制碼點(diǎn)離開字體環(huán)境不會(huì)顯示圖形。四種使用方式實(shí)戰(zhàn)倉(cāng)庫(kù) README 提供了npm i bootstrap-iconsnpm或composer require twbs/bootstrap-iconsComposer兩種安裝途徑。安裝后可按需選擇接入方式。1. 內(nèi)聯(lián) SVG推薦可裁剪可定制直接從 icons/file-earmark-bar-graph.svg 復(fù)制內(nèi)容嵌入 HTML。由于fillcurrentColor配合 CSS 即可控制顏色與尺寸svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph viewBox0 0 16 16 path dM10 13.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ path dM14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z/ /svg.bi-file-earmark-bar-graph { color: #6f42c1; width: 2em; height: 2em; }2.img引用img srcicons/file-earmark-bar-graph.svg alt數(shù)據(jù)圖表文檔 width32 height32此方式下currentColor不生效顏色由 SVG 文件自身決定本圖標(biāo)源文件未內(nèi)置具體顏色將默認(rèn)渲染為黑色如需定制可先編輯副本再引用。3. SVG Spriteuse引用倉(cāng)庫(kù)根目錄的 bootstrap-icons.svg 是打包好的 SVG Sprite每個(gè)圖標(biāo)以symbol idfile-earmark-bar-graph形式存在。使用時(shí)在頁面引入 Sprite 并通過use指向?qū)?yīng)符號(hào)svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#file-earmark-bar-graph/ /svg文檔列表模板 docs/layouts/partials/icons.html 正是采用這一模式渲染圖標(biāo)網(wǎng)格use xlink:href../bootstrap-icons.svg#{{ $filename }}/。Sprite 方式避免了重復(fù)內(nèi)聯(lián)整段 SVG適合頁面中多次使用同一圖標(biāo)。4. 圖標(biāo)字體i標(biāo)簽先引入字體樣式link relstylesheet hreffont/bootstrap-icons.css然后按“bi基礎(chǔ)類 bi-圖標(biāo)名具體類”的方式使用i classbi bi-file-earmark-bar-graph/i i classbi bi-file-earmark-bar-graph-fill/i這是官方文檔站點(diǎn)本身的使用方式——docs/layouts/partials/icons.html 首頁網(wǎng)格渲染classbi bi-{{ $filename }}而 docs/layouts/icons/single.html 詳情頁給出的字體片段同樣為i classbi bi-file-earmark-bar-graph/i。字體方式可以用font-size直接縮放配合color著色最適合按鈕、列表、導(dǎo)航等高頻場(chǎng)景。官方文檔頁如何展示該圖標(biāo)閱讀 docs/layouts/icons/single.html 可以看到官方詳情頁的完整信息結(jié)構(gòu)這也是每個(gè)圖標(biāo)獨(dú)立文檔頁的標(biāo)準(zhǔn)模板從/icons/名稱.svg讀取源文件并渲染大圖預(yù)覽與多組示例標(biāo)題、正文行內(nèi)、鏈接、按鈕、輸入框組Download區(qū)塊提供源 SVG 下載Icon font區(qū)塊給出i classbi bi-.../i片段Code point區(qū)塊從 font/bootstrap-icons.json 讀取數(shù)值并換算輸出 UnicodeUF35A、CSS\f35a、JS\uF35A、HTML#xF35A;四種寫法對(duì)應(yīng)本圖標(biāo)碼點(diǎn) 62298Copy HTML區(qū)塊直接高亮展示可復(fù)制的內(nèi)聯(lián) SVG。簡(jiǎn)而言之一個(gè)圖標(biāo) Front Matter 元數(shù)據(jù)docs/content/icons/file-earmark-bar-graph.md 源 SVGicons/file-earmark-bar-graph.svg 字體碼點(diǎn)font/bootstrap-icons.json三者的組合本圖標(biāo)恰好是這一三要素結(jié)構(gòu)的完整樣例。小結(jié)語義定位bi-file-earmark-bar-graph歸入 Files and folders 分類標(biāo)簽doc / document / data / chart用于「數(shù)據(jù)圖表文檔」場(chǎng)景如報(bào)表入口、統(tǒng)計(jì)文件列表項(xiàng)、分析工具占位圖圖形內(nèi)核右上折角文檔 三根高度遞減數(shù)據(jù)柱v-6 / v-4 / v-2fillcurrentColor保證隨主題變色雙變體常規(guī)版與-fill版圖形骨架一致實(shí)心/線框按頁面氛圍取舍碼點(diǎn)UF35A62298CSS\f35a、JS\uF35A、HTML#xF35A;四寫等價(jià)但必須配合字體文件渲染接入路徑內(nèi)聯(lián) SVG、img、SVG Sprite、圖標(biāo)字體四種方式均可從本倉(cāng)庫(kù)直接取得素材無需額外處理即可投入項(xiàng)目。贊分享前端【免費(fèi)下載鏈接】iconsOfficial open source SVG icon library for Bootstrap.項(xiàng)目地址https://gitcode.com/gh_mirrors/ic/icons點(diǎn)擊查看免費(fèi)下載相關(guān)推薦uni-app x 統(tǒng)計(jì)模塊 uni-stat 版本演進(jìn)與技術(shù)實(shí)現(xiàn)深度解讀uni app x 統(tǒng)計(jì)模塊 uni stat 版本演進(jìn)與技術(shù)實(shí)現(xiàn)深度解讀 uni統(tǒng)計(jì) for uni app x模塊 id uni stat 是面向 u前端N_m3u8DL-RE一條命令搞定流媒體下載N_m3u8DL RE一條命令搞定流媒體下載 你想把一場(chǎng)直播存下來或者把一門在線課程存到本地但拿到的鏈接點(diǎn)開卻是一個(gè) .m3u8 或 .mpd 文件——它前端Bootstrap Icons 的 caret-down-square 圖標(biāo)SVG 結(jié)構(gòu)、字體碼點(diǎn)與完整使用指南Bootstrap Icons 的 caret down square 圖標(biāo)SVG 結(jié)構(gòu)、字體碼點(diǎn)與完整使用指南 caret down square向下插入前端上一篇svg2pdf.js性能優(yōu)化提升SVG轉(zhuǎn)PDF轉(zhuǎn)換速度的7個(gè)實(shí)用技巧下一篇Next.js Playground并行路由實(shí)戰(zhàn)構(gòu)建復(fù)雜導(dǎo)航系統(tǒng)的完整教程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Bootstrap Icons 的 file-earmark-bar-graph 圖標(biāo)：SVG 結(jié)構(gòu)、字體碼點(diǎn)與完整使用指南
前端【免費(fèi)下載鏈接】iconsOfficial open source SVG icon library for Bootstrap.項(xiàng)目地址https://gitcode.com/gh_mirrors/ic/icons點(diǎn)擊查看免費(fèi)下載file-earmark-bar-graph文件-角標(biāo)-柱狀圖是 Bootstrap Icons 開源 SVG 圖標(biāo)庫(kù)中「Files and folders文件與文件夾」分類下的一個(gè)代表性圖標(biāo)用于表達(dá)“包含數(shù)據(jù)圖表的文檔”這一語義。本文以倉(cāng)庫(kù)中的 文檔頁、SVG 源文件 及其 Fill 變體為據(jù)深入講解該圖標(biāo)的視覺構(gòu)成、雙變體差異、字體碼點(diǎn)以及嵌入 HTML、SVG Sprite、圖標(biāo)字體等全套使用方式幫助你把它正確接入 Bootstrap 項(xiàng)目。圖標(biāo)基本信息與文檔結(jié)構(gòu)在倉(cāng)庫(kù)中每個(gè)圖標(biāo)對(duì)應(yīng)docs/content/icons/下的一個(gè) Markdown 文檔file-earmark-bar-graph的文檔內(nèi)容如下--- title: File earmark bar graph categories: - Files and folders tags: - doc - document - data - chart ---這份 Front Matter 定義了三個(gè)關(guān)鍵元信息titleFile earmark bar graph即該圖標(biāo)在文檔站點(diǎn)上的展示名稱categoriesFiles and folders將該圖標(biāo)歸入「文件與文件夾」分類tagsdoc、document、data、chart分別對(duì)應(yīng)「文檔」「數(shù)據(jù)」「圖表」等檢索關(guān)鍵詞便于按語義篩選圖標(biāo)。這些元數(shù)據(jù)在站點(diǎn)生成時(shí)會(huì)被真正消費(fèi)文檔列表模板 docs/layouts/partials/icons.html 通過data-tags、data-categories屬性把分類與標(biāo)簽輸出到搜索過濾器而詳情頁模板 docs/layouts/icons/single.html 則在標(biāo)題下方直接渲染 Tags 與 Category 列表。也就是說當(dāng)你需要表達(dá)“一份包含統(tǒng)計(jì)柱狀圖的文檔文件”時(shí)按file-earmark-bar-graph這個(gè)語義關(guān)鍵詞即可檢索到本圖標(biāo)。圖標(biāo)設(shè)計(jì)解讀折角文檔 三根數(shù)據(jù)柱file-earmark-bar-graph的矢量圖形定義位于 icons/file-earmark-bar-graph.svg完整內(nèi)容如下svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph viewBox0 0 16 16 path dM10 13.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ path dM14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z/ /svg可以從 SVG 源碼層面拆解它的視覺構(gòu)成標(biāo)準(zhǔn)畫布width16 height16、viewBox0 0 16 16與 Bootstrap Icons 全庫(kù)統(tǒng)一的 16×16 網(wǎng)格一致保證與其他圖標(biāo)并排時(shí)尺寸協(xié)調(diào)著色方式fillcurrentColor意味著圖標(biāo)顏色完全繼承父元素的color無需額外指定即可跟隨主題切換第一條 path數(shù)據(jù)柱繪制三根高度遞減的柱狀條——左側(cè)柱高 2 個(gè)單位v-2中間柱高 4 個(gè)單位v-4右側(cè)柱高 6 個(gè)單位v-6自上而下形成典型的“數(shù)據(jù)趨勢(shì)”視覺語言第二條 path文檔本體采用“折角文檔earmark”輪廓——左下角圓角矩形 右上角折角。路徑從M14 14V4.5L9.5 0開始表示折角位于文檔右上角這正是earmark系列圖標(biāo)共有的特征。從源碼結(jié)構(gòu)可以推斷earmark右上折角用于標(biāo)識(shí)“這是一個(gè)帶附加元數(shù)據(jù)的文件”而內(nèi)部的柱狀圖形則表達(dá)“該文件包含統(tǒng)計(jì)圖表/數(shù)據(jù)”二者結(jié)合即構(gòu)成「數(shù)據(jù)圖表文檔」的完整語義。雙變體Outline 與 Fill與 Bootstrap Icons 中大多數(shù)圖標(biāo)一樣file-earmark-bar-graph提供輪廓Outline與實(shí)心Fill兩個(gè)變體后者見 icons/file-earmark-bar-graph-fill.svgsvg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph-fill viewBox0 0 16 16 path dM9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1m.5 10v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5m-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ /svg兩個(gè)變體的對(duì)比要點(diǎn)Fill 變體將文檔輪廓合并為實(shí)心色塊H4a2 2 0 0 0-2 2v12...右上折角處多了「撕角」造型M9.5 3.5v-2l3 3h-2折角區(qū)域留白三根數(shù)據(jù)柱在兩種變體中高度與位置完全一致右側(cè)柱v-6、中間柱v-4、左側(cè)柱v-2保證切換變體時(shí)圖形骨架不漂移命名上統(tǒng)一遵循名稱與名稱-fill的倉(cāng)庫(kù)約定同組的file-earmark-*系列arrow、binary、break、check 等均采用該規(guī)則。選擇建議頁面整體使用實(shí)心圖標(biāo)如導(dǎo)航高亮、主按鈕時(shí)優(yōu)先-fill變體需要輕量線框質(zhì)感如輔助說明、占位符時(shí)使用 Outline 變體。字體碼點(diǎn)從 JSON 到 CSS/JS/HTML除直接使用 SVG 外Bootstrap Icons 還以圖標(biāo)字體形式發(fā)布。倉(cāng)庫(kù)通過 font/bootstrap-icons.json 記錄每個(gè)圖標(biāo)的 Unicode 碼點(diǎn)file-earmark-bar-graph-fill: 62297, file-earmark-bar-graph: 62298數(shù)值 62297 / 62298 轉(zhuǎn)換為十六進(jìn)制即為UF359-fill與UF35A常規(guī)與字體樣式表 font/bootstrap-icons.css 中的映射完全一致.bi-file-earmark-bar-graph-fill::before { content: \f359; } .bi-file-earmark-bar-graph::before { content: \f35a; }據(jù)此你可以用四種等價(jià)方式引用碼點(diǎn)場(chǎng)景寫法結(jié)果CSScontent: \f35aUF35AJavaScript\uF35AUF35AHTML 實(shí)體#xF35A;UF35AUnicode 字面量UF35AUF35A注意碼點(diǎn)落在 Unicode 私有使用區(qū)Private Use AreaPUAUF000 起僅當(dāng)頁面加載了 Bootstrap Icons 字體文件font/bootstrap-icons.woff2 與 font/fonts/bootstrap-icons.woff時(shí)才能正確渲染單獨(dú)復(fù)制碼點(diǎn)離開字體環(huán)境不會(huì)顯示圖形。四種使用方式實(shí)戰(zhàn)倉(cāng)庫(kù) README 提供了npm i bootstrap-iconsnpm或composer require twbs/bootstrap-iconsComposer兩種安裝途徑。安裝后可按需選擇接入方式。1. 內(nèi)聯(lián) SVG推薦可裁剪可定制直接從 icons/file-earmark-bar-graph.svg 復(fù)制內(nèi)容嵌入 HTML。由于fillcurrentColor配合 CSS 即可控制顏色與尺寸svg xmlnshttp://www.w3.org/2000/svg width16 height16 fillcurrentColor classbi bi-file-earmark-bar-graph viewBox0 0 16 16 path dM10 13.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5z/ path dM14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z/ /svg.bi-file-earmark-bar-graph { color: #6f42c1; width: 2em; height: 2em; }2.img引用img srcicons/file-earmark-bar-graph.svg alt數(shù)據(jù)圖表文檔 width32 height32此方式下currentColor不生效顏色由 SVG 文件自身決定本圖標(biāo)源文件未內(nèi)置具體顏色將默認(rèn)渲染為黑色如需定制可先編輯副本再引用。3. SVG Spriteuse引用倉(cāng)庫(kù)根目錄的 bootstrap-icons.svg 是打包好的 SVG Sprite每個(gè)圖標(biāo)以symbol idfile-earmark-bar-graph形式存在。使用時(shí)在頁面引入 Sprite 并通過use指向?qū)?yīng)符號(hào)svg classbi width16 height16 fillcurrentColor use xlink:hrefbootstrap-icons.svg#file-earmark-bar-graph/ /svg文檔列表模板 docs/layouts/partials/icons.html 正是采用這一模式渲染圖標(biāo)網(wǎng)格use xlink:href../bootstrap-icons.svg#{{ $filename }}/。Sprite 方式避免了重復(fù)內(nèi)聯(lián)整段 SVG適合頁面中多次使用同一圖標(biāo)。4. 圖標(biāo)字體i標(biāo)簽先引入字體樣式link relstylesheet hreffont/bootstrap-icons.css然后按“bi基礎(chǔ)類 bi-圖標(biāo)名具體類”的方式使用i classbi bi-file-earmark-bar-graph/i i classbi bi-file-earmark-bar-graph-fill/i這是官方文檔站點(diǎn)本身的使用方式——docs/layouts/partials/icons.html 首頁網(wǎng)格渲染classbi bi-{{ $filename }}而 docs/layouts/icons/single.html 詳情頁給出的字體片段同樣為i classbi bi-file-earmark-bar-graph/i。字體方式可以用font-size直接縮放配合color著色最適合按鈕、列表、導(dǎo)航等高頻場(chǎng)景。官方文檔頁如何展示該圖標(biāo)閱讀 docs/layouts/icons/single.html 可以看到官方詳情頁的完整信息結(jié)構(gòu)這也是每個(gè)圖標(biāo)獨(dú)立文檔頁的標(biāo)準(zhǔn)模板從/icons/名稱.svg讀取源文件并渲染大圖預(yù)覽與多組示例標(biāo)題、正文行內(nèi)、鏈接、按鈕、輸入框組Download區(qū)塊提供源 SVG 下載Icon font區(qū)塊給出i classbi bi-.../i片段Code point區(qū)塊從 font/bootstrap-icons.json 讀取數(shù)值并換算輸出 UnicodeUF35A、CSS\f35a、JS\uF35A、HTML#xF35A;四種寫法對(duì)應(yīng)本圖標(biāo)碼點(diǎn) 62298Copy HTML區(qū)塊直接高亮展示可復(fù)制的內(nèi)聯(lián) SVG。簡(jiǎn)而言之一個(gè)圖標(biāo) Front Matter 元數(shù)據(jù)docs/content/icons/file-earmark-bar-graph.md 源 SVGicons/file-earmark-bar-graph.svg 字體碼點(diǎn)font/bootstrap-icons.json三者的組合本圖標(biāo)恰好是這一三要素結(jié)構(gòu)的完整樣例。小結(jié)語義定位bi-file-earmark-bar-graph歸入 Files and folders 分類標(biāo)簽doc / document / data / chart用于「數(shù)據(jù)圖表文檔」場(chǎng)景如報(bào)表入口、統(tǒng)計(jì)文件列表項(xiàng)、分析工具占位圖圖形內(nèi)核右上折角文檔 三根高度遞減數(shù)據(jù)柱v-6 / v-4 / v-2fillcurrentColor保證隨主題變色雙變體常規(guī)版與-fill版圖形骨架一致實(shí)心/線框按頁面氛圍取舍碼點(diǎn)UF35A62298CSS\f35a、JS\uF35A、HTML#xF35A;四寫等價(jià)但必須配合字體文件渲染接入路徑內(nèi)聯(lián) SVG、img、SVG Sprite、圖標(biāo)字體四種方式均可從本倉(cāng)庫(kù)直接取得素材無需額外處理即可投入項(xiàng)目。贊分享前端【免費(fèi)下載鏈接】iconsOfficial open source SVG icon library for Bootstrap.項(xiàng)目地址https://gitcode.com/gh_mirrors/ic/icons點(diǎn)擊查看免費(fèi)下載相關(guān)推薦uni-app x 統(tǒng)計(jì)模塊 uni-stat 版本演進(jìn)與技術(shù)實(shí)現(xiàn)深度解讀uni app x 統(tǒng)計(jì)模塊 uni stat 版本演進(jìn)與技術(shù)實(shí)現(xiàn)深度解讀 uni統(tǒng)計(jì) for uni app x模塊 id uni stat 是面向 u前端N_m3u8DL-RE一條命令搞定流媒體下載N_m3u8DL RE一條命令搞定流媒體下載 你想把一場(chǎng)直播存下來或者把一門在線課程存到本地但拿到的鏈接點(diǎn)開卻是一個(gè) .m3u8 或 .mpd 文件——它前端Bootstrap Icons 的 caret-down-square 圖標(biāo)SVG 結(jié)構(gòu)、字體碼點(diǎn)與完整使用指南Bootstrap Icons 的 caret down square 圖標(biāo)SVG 結(jié)構(gòu)、字體碼點(diǎn)與完整使用指南 caret down square向下插入前端上一篇svg2pdf.js性能優(yōu)化提升SVG轉(zhuǎn)PDF轉(zhuǎn)換速度的7個(gè)實(shí)用技巧下一篇Next.js Playground并行路由實(shí)戰(zhàn)構(gòu)建復(fù)雜導(dǎo)航系統(tǒng)的完整教程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考