uniapp：使用字体图标

uniapp本身有icon组件，但是数量毕竟有限，如果想要自定义icon，也非常简单。

1、在iconfont网站添加需要的图标

2、将图标添加至项目

 

3、在我的项目里生成代码

4、将生成的文件下载至本地

 5、把iconfont.css和iconfont.ttf文件拷到static的fonts文件夹下。

 6、修改iconfont.css文件

@font-face {
    font-family: "iconfont";
    src: url('~@/static/fonts/iconfont.ttf');
}

 7、在vue的style里引入iconfont.css文件

/* 引入字体图标 */
	@import url("/static/fonts/iconfont.css");

8、在template里使用字体图标

<text class="icon iconfont icon-title"></text>

 比如我们要使用title图标，就设置class="icon iconfont icon-title"，总之，要跟css文件里的class名称保持一致。

 

 最终效果：