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. Centos6.8 安装tomcat8.5.11

    1.下载 安装包 wget http://mirrors.aliyun.com/apache/tomcat/tomcat-8/v8.5.11/bin/apache-tomcat-8.5.11.tar. ...

  2. Problem F: 合唱比赛开始了!

    Problem F: 合唱比赛开始了! Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 440  Solved: 201[Submit][Status][ ...

  3. Intellij导入子项目时,maven列表子项目灰色不可用---解决方法

    导入子项目的module时,左侧project目录中有一个module图标右下角没有小蓝点,maven管理列表该module为灰色(表明未被管理),尝试几次后终于找到解决方案. 贴一张调好过后的图 第 ...

  4. 基于webpack搭建的vue+element-ui框架

    花了1天多的时间, 终于把这个框架搭建起来了. 好了, 不多说了, 直接进入主题了.前提是安装了nodejs,至于怎么安装, 网上都有教程. 这里就不多说了, 这边使用的IDE是idea.1.在E:/ ...

  5. Python 面向对象基础知识

    面向对象基础知识 1.什么是面向对象编程? - 以前使用函数 - 类 + 对象 2.什么是类什么是对象,又有什么关系? class 类: def 函数1(): pass def 函数2(): pass ...

  6. transition过度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python3基础视频教程

    随着目前Python行业的薪资水平越来越高,很多人想加入该行业拿高薪.有没有想通过视频教程入门的同学们?这份Python教程全集等你来学习啦! python3基础视频教程:http://pan.bai ...

  8. 阿里Dubbo疯狂更新,关Spring Cloud什么事?

    最近,开源社区发生了一件大事,那个全国 Java 开发者使用最广的开源服务框架 Dubbo 低调重启维护,并且 3 个月连续发布了 4 个维护版本. 我上次在写放弃Dubbo,选择最流行的Spring ...

  9. Spring+SpringMVC+MyBatis+easyUI整合进阶篇(九)Linux下安装redis及redis的常用命令和操作

    redis简介 Redis是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis与其他key-value缓存产品有以下三个特点: Redis支持数据的持久化,可以将内存 ...

  10. 2017-11-22 Intall Ubuntu Log

    重启之后进入不了系统,安装工具check defect也不好用(问题尚不清楚),决定重做系统 直接用u盘(Universal_USB_Installer制作的安装工具,之前用都没有问题)安装,前面一起 ...