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