小程序引入字体图标

小程序本地使用字体图标

• 下载字体图标
  

• 创建一个子体文件 把字体图标改成 wxss 不然小程序 会找不到这个文件
  

• 在app.wxss 引入
  

• 拓展
  

注意点：

• iconfont.css 改成 wxcss
• 引入是 @import

小程序在线引入字体图标

• 把在线链接代码复制到wxss 文件 在全局引入
  
• 字体图标在任何页面都可以使用
  

图标组件化

• 创建icon组件

• 在线引入图标 修改后缀名 尽可能的语义化 注意每次更改则需要重新生成在线链接
  

• 复制wxss 文件中
  

• 在需要的组件中引入使用就可以
  

• 组件内部实现

 properties: {
     logo:{
       type:String
     }
  },
  <text class="iconfont icon-{{logo}}">componnet/icon.wxml</text>
  

• 使用

   <myicon logo='eye'></myicon>