、圖片標簽是用 <img> 單標簽來定義：

作用是向網頁中添加圖片，并且img標簽有多個可用參數可以添加。

二、代碼演示

頭條創作挑戰賽#

本文同步本人掘金平臺的原創翻譯：https://juejin.cn/post/7066995441165926413

直接上正文～

1. Feathericons

Feathericons 是精美的開源圖標集合，每個圖標按照24 * 24的規格進行設計。

特性?

• 開源（免費使用）
• 可通過 NPM 包安裝
• 可通過 CDN 引用
• 圖標制作精美

2. Ionicons

針對web、iOS、Andriod和桌面應用是一個很優質的圖標庫。支持SVG和web font。

特性?

• 開源（免費使用）
• 可通過 NPM 包安裝
• 可通過 CDN 引用
• 圖標制作精美
• 有不同選擇：輪廓，填充和銳化

3. Boxicons

簡單的開源圖標，適合設計師和相關開發者。

特性?

• 開源（免費使用）
• 可通過 NPM 包安裝
• 可通過 CDN 引用
• 圖標制作精美
• 有不同選擇：規則，實體和品牌圖

4. Heroicons

SVG 圖標，由很火的 Tailwind CSS 制作者引導。

Tailwind CSS 可以打開你編寫樣式的新大門，感興趣可以了解下。

特性?

• 開源（免費使用）
• 可通過 NPM 包安裝
• 可直接復制 SVG 代碼 ?
• 圖標制作精美
• 社區強大

5. CSS Icons

此開源的圖標可支持僅純CSS代碼編寫，也可支持其它不同的形式，如：SVG, Figma等。如果你在站點性能上追求極致，推薦你使用這個庫。它的存CSS代碼的編寫，能減少額外的圖標請求鏈接的請求。??

特性?

• 開源（免費使用）
• 可通過 NPM 包安裝
• 可通過 CDN 引用
• 圖標制作精美
• 圖標可以僅通過 CSS 完成，使得你項目性能更高

當然還有很多的圖標庫可以推薦給大家，但是，上面的 5 個已經很好并且已經夠用了。讀者可以選擇適合自己的圖片庫去使用。

后話

• 原文：Top 5 Best Javascript Icons Libraries

里云字體圖標

https://www.iconfont.cn/

搜索(如search)->添加到項目->新建項目->輸入項目的名稱->imooc->確定->圖標管理->我的項目

->查看在線鏈接->點擊復制代碼

如: //at.alicdn.com/t/font_1938354_qkmgv0wrqn.css

用瀏覽器查看

@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.eot?t=1594516550737'); /* IE9 */
src: url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.eot?t=1594516550737#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABnQAAAKHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBAIEYATYCJAMICwYABCAFhG0HMBu+Bcg+QDZkA/VFtNCYsKMQslzfV5PE3kH8mC1MBNEaOnt3QVSICiSgBtRRUXFx8ahQt8LUCCBVzbosfP/+19qceajz+nm85HjSujp/xWcHax6JlEyoeCORITTc4JJ50k22WVLvu23OKK01Q0hkvYaJ4WunJ9v3mlWRcuTgdStdgP8H19SPzSMxD2hunRSVHAk4sOkAo4pGtpGMfMPYBS7hOIFGA/oKW1sHx1BXWOMCceY5BtRzXkVhiXqhtmZpEfdCfbpNH3EXfj/+mY86SU1mleyebmyY/yw7JV9XjI/wQUCra5AxBxTisDa6rSQYtaQxWjYC9lUY/KTqW8RejYL9dVZ+M+iDonsSu5JbzU+gxN0jwNqoq0i9XJ3+GH9avXbH7n7y4vlFpLjsNpLu4qT39NS0UJWX1RePlCus8qq6zQ48+uyf/ruOL7n3nwbu/OE9A9eHLyfb8v7Dgj9QMf/IQgHBdTe1XLreVMB3LjN0Vyz62UH9/m3BfxL3bCq61DKnoopr7cnIqLEJjRpRATs7/Y3V9dxUMtTruTV7nf4UsnpjaCHOQY0mi1Cr3io0mrW9ukkXVhKlATMeAIR2z5C0eglZu2+0EH+hRq9/qNUeJWh0HF1bNpkIr7nJZAjZaF6hZyWxcqzSjAoPyTkLDc5KQ/Ypce4FcDIcFxPbFBPPMSM/d6YiChUnEW6B0ygME0w58cmSoSuSzkYjVfemoZVE0LSJEYMgNmS6gjyWREz5nUWz9PlDxHEmZOCWsprgKcJyXu9oYmjcA91Wxb3K7uWV3DnHlBAKUlgigrbAIBIKJVBaP8hHLGLIHRFOzYzsdqqvari+JvqAQlaFpU9h98tqz8lgywUAAA==') format('woff2'),
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.woff?t=1594516550737') format('woff'),
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.ttf?t=1594516550737') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.svg?t=1594516550737#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
content: "\e630";
}

在開發項目中新建目錄和文件common/css/icons.css

刪除一些url和src代碼, 只留下base64代碼(自定義字體圖標庫, 建議使用 base64 格式的字體)