、图片标签是用 <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 格式的字体)