一使用BootCDN图标库
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-105-1024x436.png)
1.在线使用图标库
官网打开https://www.bootcdn.cn/,然后在搜索库中搜索font
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-106-1024x301.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-107.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-108-1024x245.png)
在网站https://fontawesome.dashgame.com/选择自己需要的图标复制标签,例如fa-adjust
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-110-1024x337.png)
2.在本地使用图标
本地使用时,需要把下载好的图标库移动到项目目标文件内,其他步骤同在线操作一样
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-111-1024x544.png)
二.使用阿里巴巴矢量图标库
1.在线使用图标库
打开网址https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-112-1024x328.png)
登录以后,在图标库里面选择自己需要的图标
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-113.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-121.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-115-1024x593.png)
@font-face { font-family: 'iconfont'; /* project id 2089804 */ src: url('//at.alicdn.com/t/font_2089804_6xh442fknc4.eot'); src: url('//at.alicdn.com/t/font_2089804_6xh442fknc4.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2089804_6xh442fknc4.woff2') format('woff2'), url('//at.alicdn.com/t/font_2089804_6xh442fknc4.woff') format('woff'), url('//at.alicdn.com/t/font_2089804_6xh442fknc4.ttf') format('truetype'), url('//at.alicdn.com/t/font_2089804_6xh442fknc4.svg#iconfont') format('svg'); }
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-116.png)
.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-117-1024x644.png)
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-118-1024x603.png)
2.在本地使用图标
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-119-1024x537.png)
//at.alicdn.com/t/font_2089804_6xh442fknc4.css
![](http://120.27.222.121/wp-content/uploads/2020/09/图片-120-1024x323.png)
以上方法都可以添加图标到项目,选择一种即可。
- List item