学习笔记:原生(android,ios)使用阿里iconfont图标

iconfont官网:https://www.iconfont.cn

一、官方使用篇:

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=code

##1. Android使用

android可以直接使用单个icon(svg,png)。也可以直接引入字体应用:

第一步:从iconfont平台选择要使用到的图标,并下载至本地;复制字体文件到项目 assets 目录

https://img.alicdn.com/tps/TB1z4QbNpXXXXX4XFXXXXXXXXXX-882-730.gif

第二步:打开从iconfont平台下载下来的文件,并在目录中打开demo.html,找到图标相对应的 HTML 实体字符码;

https://img.alicdn.com/tfscom/T1p8FvFu8jXXaCwpjX.png

第三步:打开 res/values/strings.xml,添加 string 值;

<string name="icons">&#x3605; &#x35ad; &#x35ae; &#x35af;</string>

第四步:打开 activity_main.xml,添加 string 值到 TextView:

<TextView

    android:id="../../+id/like"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="../../string/icons" />

第五步:为 TextView 指定文字:

import android.graphics.Typeface;
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
    TextView textview = (TextView)findViewById(R.id.like);
    textview.setTypeface(iconfont);
}

https://img.alicdn.com/tfscom/T1OvFvFCRlXXaCwpjX.png

##2. IOS使用

IOS可以直接使用单个icon(svg,png)。也可以直接引入字体应用:

第一步:将您从IconFont平台下载的字体文件(.ttf)添加到工程中;

打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:“iconfont.ttf“

https://img.alicdn.com/tfscom/T1R3VxFuRnXXaCwpjX.png

第二步:使用IconFont字体:

UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];
label.font = iconfont;
label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";
[self.view addSubview: label];

这里有两个地方注意下:

  • 创建 UIFont 使用的是字体名,而不是文件名;
  • 文本值为 8 位的 Unicode 字符,我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码,比如: "店" 对应的 HTML 实体 Unicode 码为:0x3439 转换后为:\U00003439 就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符

二、实战使用篇

##1.android实战使用

https://blog.csdn.net/AME1314/article/details/89791042  

 

##2.IOS 实战 使用

https://www.jianshu.com/p/0e899abe6bbc

演示demo:https://github.com/chuzhaozhi/iconfontDemo

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

荣•厚德载物

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值