# 框架小图标的ICON化（纯色图标）
> 项目为了减少体积很多纯色小图标可以采用icon方式引用以及可以随意变更颜色大小
- #### icon引入方法
1. 网络路径必须加协议头 `https`
2. 从 [http://www.iconfont.cn](http://www.iconfont.cn/) 上拷贝的代码，默认是没加协议头的。
3. 从 [http://www.iconfont.cn](http://www.iconfont.cn/) 上下载的字体文件，都是同名字体（字体名都叫iconfont，安装字体文件时可以看到），在nvue内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
eg：在app.vue的style中挂载
```javascript
@font-face {
font-family: 'tade';
font-weight: normal;
font-style: normal;
// src: url('https://at.alicdn.com/t/font_2292757_yy8gfrog4za.ttf') format('truetype');
src: url('./common/font_icon/iconfont.ttf') format('truetype');
}
.icon-tade {
text-align: center;
font-family: 'tade' !important;
}
```
使用方法
```html
<text class="icon-tade"></text>
```
