weex项目使用iconfont 字体图标

一、使用本地字体图标

1、在 https://www.iconfont.cn/manage/index 注册自己的账号

2、创建自己的项目

在这里插入图片描述

3、添加自己需要的图标，并将其下载到本地

在这里插入图片描述

4、入口页面引入

将下载的文件解压，拷贝其中的 iconfont.ttf
在这里插入图片描述

放到 src > font 文件夹里去（我把名称改为了iconfontcust.ttf），然后在入口的index.vue 的created方法中引用，如下图
在这里插入图片描述

        created(){
            // 添加 字体图标
            var font=weex.requireModule("font");
            font.addFont('iconfont-cust','root:font/iconfontcust.ttf')
        },

5、项目中使用

然后在需要的.vue文件增加如下css


<style scoped lang="stylus" ref="stylesheet/stylus">
    .bar-ic
        font-size 38px
    .bar-text
        padding-top 4px
        font-size 24px
        color #808080
    .iconfont-cust
        font-family: iconfont-cust
</style>

使用text 标签 class 引用

<template>
    <div class="page-container">
      <text class="bar-text bar-ic bar-icon iconfont-cust">&#xe634;</text>
    </div>
</template>

参考官方文档 https://weexplus.github.io/doc/mo-kuai/font.html

二、使用在线的字体图标

1、2、步骤和上面使用本地图标一样

3、项目中引用

在这里插入图片描述
将上面红框中.ttf文件路径拷贝到项目入口页面index.vue 的created方法中，如下：

        created(){
            // 添加 字体图标
            var domModule=weex.requireModule("dom");
            domModule.addRule('fontFace',{
                'fontFamily':'iconfont-cust',   //注意这里必须是驼峰命名，跟上面的css样式对照
                'src':"url('http://at.alicdn.com/t/font_1370995_o2jnua5c7d.ttf')"
            })
        },

4、项目中使用

和上面使用本地字体图标的第 5 步一样