⚠️注意:weex引入字体图标和web开发时候引入的字体图表方式不一样,不能直接下载字体图标中之后直接引入项目,阿里巴巴矢量图标库解决了开发时的图标问题
第一步:
进入到阿里巴巴矢量图标
第二步:
搜索你想要的图标 ➡️ 加入购物车 ➡️ 把图标整理好之后 ➡️ 点右上角的购物车图标 ➡️ 添加到项目
第三步:
第四步:
在你需要添加字体图表的组件内引入字体图标
两种引用字体图标
第一种:在线引用
// script created() { var domModule = weex.requireModule("dom"); domModule.addRule('fontFace', { 'fontFamily': 'iconfont', //注意这里必须是驼峰命名,跟上面的css样式对照 'src': "url('//at.alicdn.com/t/font_503936_ecd2vxvlwqiio1or.ttf')" }) }
第二种:本地引用
// script created() { var domModule = weex.requireModule("dom"); domModule.addRule('fontFace', { 'fontFamily': 'iconfont', //注意这里必须是驼峰命名,跟上面的css样式对照 'src': "url('src/font/iconfont.ttf')" }) }
// template <text class="bell"></text>
// style .bell { font-family:iconfont }