weex加入图标可能是项目开发中最头疼的事情了,还好有 阿里巴巴矢量图标库解决了开发时的图标问题,下面我们一起来踩坑吧

<text  class="left"></text>
<style>
  .left{
     font-family:iconfont
  }
</style> data(){...},
methods:{...},
created (){
var domModule=weex.requireModule("dom");
domModule.addRule('fontFace',{
'fontFamily':'iconfont', //注意这里必须是驼峰命名,跟上面的css样式对照
   'src':"url(\'http://at.alicdn.com/t/font_492735_cqteemnpxk7ta9k9.ttf\')"
})
}
打开 http://www.iconfont.cn/
搜索你想要的图标 => 加入购物车 => 把图标整理好之后 => 点右上角的购物车图标 => 添加到项目
选择第一个,生成代码,复制下方代码到项目里



												

weex加入iconfont的更多相关文章

  1. weex 学习: 添加图标(使用阿里吧吧-icon)

    添加图标(使用阿里吧吧-icon) <text slot="left" class="header-left"></text>   i ...

  2. weex用阿里矢量图

    首先这段代码来自 zwwill在github上的 weex网易严选项目 他是在utils下封装了一个方法 let utilFunc = { initIconFont () { let domModul ...

  3. Weex学习与实践

    Weex学习与实践(一):Weex,你需要知道的事 本文主要介绍包括Weex基本介绍.Weex源码结构.初始化工程.we代码结构.Weex的生命周期.Weex的工作原理.页面间通信.boxmodel ...

  4. weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件

    1.自定义  过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...

  5. weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件

    1.安装  路由模块  及  状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义  TabBar  组件 src / ...

  6. weex 项目 创建 远程 icon

    一.创建 远程 icon 步骤一:打开  阿里巴巴矢量图标库 官网:http://www.iconfont.cn/ 步骤二:选择项目需要的 icon 步骤三:添加到项目(没有项目会自动创建) 步骤四: ...

  7. weex手机端安全键盘

    github地址:weexSafeKeyboard 效果图: 技术依赖:框架:weex+vue 弹出层:weex-ui 图标:iconfont 说明:1.如果不想用到weex-ui,可以把inputk ...

  8. 【weex】h5weex-example

    这个就是一个练手的基础性的demo,不过也是有很多值得学习的东西的 效果如下 项目地址为:https://github.com/h5weex/h5weex-example 可能是我找到的项目比较少,很 ...

  9. Nvue/Weex

    Nvue/Weex 使用Uniapp做了一个App,感觉性能不是很好,了解过Uniapp的Nvue,就想做一个纯Nvue项目,其实基本就是做一个Weex项目,不得不说坑是真的多,但是渲染性能真的是没得 ...

随机推荐

  1. Life is a Line

    Life is a Line Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Tot ...

  2. Ipad,IPhone(矩阵求递推项+欧拉定理)

    Ipad,IPhone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  3. iOS隐藏导航栏底部灰线

    首先创建 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #de38a5 } span.s1 { } span.s ...

  4. 微信公众平台快速开发框架 For Core 2.0 beta –JCSoft.WX.Core 5.2.0 beta发布

    写在前面 最近比较忙,都没有好好维护博客,今天拿个半成品来交代吧. 记不清上次关于微信公众号快速开发框架(简称JCWX)的更新是什么时候了,自从更新到支持.Net Framework 4.0以后基本上 ...

  5. [java基础] java中的自动装箱与自动拆箱

    自动装箱的一个例子: Integer i = 1; //实际上是执行了Integer i = Integer.valueOf(1) 自动拆箱的一个例子: Integer a =1; int b = a ...

  6. idea java项目部署至Tomcat服务器

    1. 服务器部署TomCat     1. 安装JDK,配置环境变量     > 变量名:JAVA_HOME;变量值:C:\Program Files\Java\jdk1.7.0_45      ...

  7. 关于ThinkPHP中的时间自动填充

    <?php class NewsModel extends Model{ protected $_auto = array( array('time_at','mydate','1','call ...

  8. Spring MVC体系结构和处理请求控制器

    Spring MVC体系结构和处理请求控制器 一:MVC设计模式: (1.)数据访问接口:DAO层 (2.)处理业务逻辑层:Service层 (3.)数据实体:POJO (4.)负责前段请求接受并处理 ...

  9. 在Java编码中,如何减少bug数量

    众所周知,Java编程语言在IT行业是企业中不可缺少的.不管,从Web应用到Android应用,这款语言已经被广泛用于开发各类应用及代码中的复杂功能.但在编写代码时,bug永远是困扰每一位从业者的头号 ...

  10. Less的转义字符

    Less的转义字符 有时候,当需要引入无效的CSS语法或Less不能识别的字符,就需要使用转义字符.此时,就可以在字符串前面加一个 ~,并将需要转义的字符串放在 "" 中.格式为: ...