iconfont图标库下载

可在 http://www.iconfont.cn 下载

下载完成后的目录中有字体文件:

iconfont.ttf

拷贝字体文件

Android:

在 Android/app/src/main 目录下新建文件夹 assets/fonts/
然后将iconfont.ttf文件拷贝到assets/fonts/目录下

使用

在下载的字体文件夹中有demo_unicode.html文件
打开文件,在界面有显示图标以及对应的unicode码值,如

  • 在Text标签中使用 
  • 并设置style:{fontFamily : 'iconfont'}。如:
1
<Text style={{fontFamily:'iconfont'}}></Text>

更方便的使用

在Text标签中可以直接写入 
但是如果要使用变量来表示,则不能使用同样的字符串,需要使用对应的unicode字符串。
例如:
 应使用 \ue697来表示。

完整示例:

1
2
let back = '\ue697';
<Text style={{fontFamily:'iconfont'}}>{back}</Text>

react-native中使用自定义的字体图标iconfont的更多相关文章

  1. 教你轻松在React Native中使用自定义iconfont

    在react-native项目中我们一般使用到 react-native-vector-icons(这里不介绍如何使用react-native-vector-icons按照官方文档即可)但是当reac ...

  2. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  3. Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

    首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是  --阿里巴巴矢量图标库 -网 ...

  4. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  5. React Native实现一个自定义模块

    概述 在 前期介绍React Native 项目结构的时候,我们讲解过React的项目组成,其中说过 node_modules 文件夹,这是一个存放 node 模块的地方.我们知道React是用npm ...

  6. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  7. React Native 中的component 的生命周期

    React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...

  8. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

  9. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

随机推荐

  1. WEB项目中使用UEditor(富文本编辑器)

    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...

  2. 装饰器模式(Decorator)

    一.装饰模式介绍 装饰模式(decorator):表示动态的给一个对象添加一些新的功能(利用子类继承父类也可以实现),但是比生成子类方式更灵活. 也叫装饰者模式或者装饰器模式 例如:我们每个人身上穿的 ...

  3. Codeforces Round #426 (Div. 2)A题&&B题&&C题

    A. The Useless Toy:http://codeforces.com/contest/834/problem/A 题目意思:给你两个字符,还有一个n,问你旋转n次以后从字符a变成b,是顺时 ...

  4. uilabel 自适应

    有时一个UILable的text内容是变化的,而且差异有很大, 需求上要求UILabel的大小高宽能够自适应text的内容.代码例子: myLable=[[UILabel alloc] initWit ...

  5. FW: linux screen -recorder by ffcast convert

    fcast -s ffmpeg -r 20 -vcodec huffyuv out.avi 上面的命令会让你选择一个要录制的区域,然后呢,就会你就可以操作了,操作完后退回去按 q 键退出结束.如果你想 ...

  6. Zipline Data Bundles

    Data Bundles A data bundle is a collection of pricing data, adjustment data, and an asset database. ...

  7. Python 之网络编程

    # 流程描述: # # 1. 服务器根据地址类型(ipv4, ipv6), socket类型, 协议创建socket; # # 2. 服务器为socket绑定ip地址和端口号; # # 3. 服务器s ...

  8. Number Sequence---hdu1711(kmp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1711 题意就是求b数组在a数组出现的位置:就是kmp模板: #include<stdio.h&g ...

  9. CListCtrl控件使用方法总结

    今天第一次用CListCtrl控件,遇到不少问题,查了许多资料,现将用到的一些东西总结如下: 以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtr ...

  10. 网络爬虫之scrapy框架详解

    twisted介绍 Twisted是用Python实现的基于事件驱动的网络引擎框架,scrapy正是依赖于twisted, 它是基于事件循环的异步非阻塞网络框架,可以实现爬虫的并发. twisted是 ...