react-native中使用自定义的字体图标iconfont

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标签中可以直接写入 
但是如果要使用变量来表示,则不能使用同样的字符串,需要使用对应的unicode字符串。
例如:
 应使用 \ue697来表示。

完整示例:

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值