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. 利用quartz实现定时调度

    1.Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.这里我介绍quartz的两种方式.我这里搭建 ...

  2. 利用win10自带的系统配置禁止开机启动项和程序

    一.利用win10自带的系统配置禁止开机启动项和程序     首先打开"运行"对话框,可以通过开始菜单打开运行,也可以按下快捷键WIN+R打开"运行".如下图. ...

  3. 高性能 AJAX

    请求数据的常用的五种方式 1.XMLHttpRequest (XHR) var url = '/data.php'; var params = [     'id=934875',     'limi ...

  4. 使用TP5创建一个REST API

    原文在这里 : http://hmw.iteye.com/blog/1190827 tp自带的api,get请求接口 /** * 显示资源列表 * * @return \think\Response ...

  5. Celery 源码解析五: 远程控制管理

    今天要聊的话题可能被大家关注得不过,但是对于 Celery 来说确实很有用的功能,曾经我在工作中遇到这类情况,就是我们将所有的任务都放在同一个队列里面,然后有一天突然某个同学的代码写得不对,导致大量的 ...

  6. SQL Server 在生产环境中这样写存储过程的坑都避免了吗?

    概述 最近因为业务的需求写了一段时间存储过程,发现之前写的存储过程存在一些不严谨的地方,特别是TRY...CATCH中嵌套事务的写法:虽然之前写的并没有错,但是还是埋藏着很大的隐患在里面.希望这篇文章 ...

  7. Liunx初学指令

    今天又讲了一下Liunx操作系统,这个感觉比较简单一点了,多积极练练就好了,今天的课堂笔记重点如下: 1. 查看当做操作目录位置 > pwd 2. 查看(当前)目录里边的文件内容 > ls ...

  8. 智能合约开发环境搭建及Hello World合约

    如果你对于以太坊智能合约开发还没有概念(本文会假设你已经知道这些概念),建议先阅读入门篇. 就先学习任何编程语言一样,入门的第一个程序都是Hello World.今天我们来一步一步从搭建以太坊智能合约 ...

  9. let and const

    let 和 const 命令 let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; v ...

  10. Python3 下实现 Tencent AI 调用

    1.背景 a.鹅厂近期发布了自己的AI api,包括身份证ocr.名片ocr.文本分析等一堆API,因为前期项目用到图形OCR,遂实现试用了一下,发现准确率还不错,放出来给大家共享一下. b.基于py ...