iconfont怎么在iOS中使用了

什么是iconfont？

简而言之就是将图标用文字（通过编码）字体的形式显示。

优点：减少项目体积包，减少切2倍图和3倍图，各设备显示效果都不错，可以随意控制大小和颜色，增加复用性。

缺点：可视化没那么强，大小不好控制。

第一步：获取iconFont图标

1.问美工吧！嘿嘿

2.啥，你家没有美工妹子。阿里图标库还有 icoMoon

这里用阿里iconfont举例

搜索选择你需要的图标，然后添加到购物车：如下图

选择完之后点击右上角的购物车按钮，点击下载代码，入下图：

下载完后打开文件夹，将后缀为ttf的拉到工程中。

查看图标对应的编码：

图标主要通过编码显示。

对于Xcode项目中，我们需要在plist中添加 Fonts provided by application 字典，并将字体（包含后缀名）写在字典中，如下图：

特别注意，必须检查下项目的build phase的项目资源中有没有刚刚添加的字体，没有的话需要添加上。如下图：

怎么使用iconfont?

第一种情况，在UIlable中使用，作为字体使用。

主要代码参考：

       let label = UILabel(frame: CGRect(x: 50, y: 60, width: 250, height: 50))label.font =  UIFont.init(name: "iconFont", size: 20)label.text = "\u{e645}" //OC语言：@"U0000e645"   //注意：编码查看点击下载文件夹中的demo_unicode.html查看label.textColor = .grayself.view.addSubview(label)

效果截图：

第二种情况，转换为image添加UIImageView中。

主要代码：

       //计算文本rectlet nscode = code as NSStringlet rect = nscode.boundingRect(with:CGSize(width: 0.0, height: 0.0) , options: .usesLineFragmentOrigin, attributes: [NSAttributedStringKey.font :  UIFont(name: "IconFont", size: fontSize)!], context: nil)let size = rect.sizelet label = UILabel(frame: CGRect(x: 0, y: 0, width: size.width, height: size.height))label.font = UIFont(name: "IconFont", size: fontSize)label.textAlignment = .centerlabel.text = codeUIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)label.layer.render(in: UIGraphicsGetCurrentContext()!)let image = UIGraphicsGetImageFromCurrentImageContext()

效果如上面的图一样

建议可以将上面关键代码用于扩展UILabel和UIImage.更方便使用。

简单封装为LFIconFont

码云地址：点击打开链接

github地址： LFIconFont

直接将LFIconFont.swift添加到项目中即可。

通过简单封装，即可实现在UILabel中使用和生成UIImage,方便快捷。

1.生成LFIconfont对象

//定义图标(建议单独放在一个文件中，方便统一管理)let icon_delete = LFIconFont(code: "\u{e645}", name: "删除")  //编码通过下载的iconfont文件夹查看let icon_pointer = LFIconFont(code: "\u{e504}", name: "大头针")

2.在文本中显示

        let deletelabel = UILabel(frame: CGRect(x: 50, y: 100, width: 250, height: 50))deletelabel.font = UIFont.init(name: "iconFont", size: 20) //在UILabel中使用是必须设置font,否则无法正常显示deletelabel.text = "这是删除图标：" + icon_delete.labelTextdeletelabel.textColor = .grayself.view.addSubview(deletelabel)

注意：使用的时候一定要设置font,不然显示不了。

3.获取图标的图片UIImage

        let deleteImage = icon_delete.iconFontImage(fontSize: 30, color: .green)let imgView = UIImageView(frame: CGRect(x: 50, y: 200, width: deleteImage.size.width, height: deleteImage.size.height))imgView.image = deleteImageself.view.addSubview(imgView)

效果图：

Swift使用iconfont图标相关推荐

前端知识：如何创建自己的Iconfont图标库
在日常的开发过程中,前端页面经常会引用一些图标,iconfont图标库是前端开发者非常友好的在线字体图标库.大家可以根据平常所涉及的项目,收藏自己需要的图标库,方便在后续的项目中使用,今天小编给大家介 ...
WPF 如何将IconFont图标转成Geometry
之前每次使用IconFont图标,都要去下载一个png图片,每次颜色什么的改了,都要重新下载,太苦逼了. 现在好了,终于找到如何方便快速地使用IconFont图标了. 是应该的演示如何从IconFon ...
[软技能] 请说说使用iconfont图标的优点和缺点
[软技能] 请说说使用iconfont图标的优点和缺点优点:减少请求次数,将多个 icon 合并到一个字体文件中,从而提高网页性能: 自由的变化大小和颜色,因为字体是可以通过样式来设置大小和颜色的: ...
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
icon-font 图标字体的使用
icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
vue3项目中如何使用iconfont图标？体积太大？看这篇文章就够了！
正文工具链接: iconfont图标一键下载浏览器插件(2000+图标一秒下载打包) 示例链接: iconfont在vue3中按需使用和编译打包示例说明在vue3项目中使用iconfont图标是 ...
iconfont图标无法显示的问题
iconfont图标无法显示的问题刚开始用icon font图标库不是很熟悉,踩了一些坑,希望分享出来能给新手们带来一些帮助从官网上下载图标至本地后,放到项目里面要注意一下两点: 1.路径问题找 ...

Swift使用iconfont图标