uni-app 使用 阿里图标icon

一、阿里巴巴图标矢量库

注意事项：

1、修改项目内的图标字体名称（iconfont 是 uni 的关键字暂不能用）。
2、使用网络字体。

 

二、项目使用

1、拷贝iconfont.css 文档到项目中，并修改引入的字体路径

1. @font-face {font-family: "eosfont";

2. src: url('https://at.alicdn.com/t/font_943490_fdgw8vjcnhp.ttf') format('truetype');

3. }

4.  

5. .eosfont {

6. font-family:"eosfont" !important;

7. font-size:16px;

8. font-style:normal;

9. -webkit-font-smoothing: antialiased;

10. -moz-osx-font-smoothing: grayscale;

11. }

2、在app.vue中引入，即可全局使用

1. <style>

2. /* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */

3. @import "./common/uni.css";

4. @import "./common/eosfont.css";

5. </style>

3、组件中使用字体图标

<text class="eosfont">&#xe61d;</text>