Swift使用iconfont图标

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 = .gray
        self.view.addSubview(label)

效果截图：

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

主要代码：

       //计算文本rect
        let nscode = code as NSString
        let 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.size
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        label.font = UIFont(name: "IconFont", size: fontSize)
        label.textAlignment = .center
        label.text = code
        UIGraphicsBeginImageContextWithOptions(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.labelText
        deletelabel.textColor = .gray
        self.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 = deleteImage
        self.view.addSubview(imgView)

效果图：