返回 导航

Swift

hangge.com

Swift - 字体图标的使用及样例（使用Font Awesome字体库，非图片）

作者：hangge | 2015-12-28 08:50
（本文代码已升级至Swift3）

一，什么是字体图标
（1）现在比较流行使用字体图标，所谓字体图标其实就是一个包含许多图标的字体库。同我们常用的字体一样，这个也可以理解为一种特殊字体，只不过里面包含的都是图标。
（2）既然是字体，那么最方便的就是可以随意在代码中更改颜色和大小而不会失真。这样不需要因为要适配各种尺寸而制作多个图片，或者做多套颜色的图标用来标识不同状态。
（3）无论是按钮图标还是导航栏图标，也不管是网站开发还是移动应用开发，字体图标都能适用。
（比如下面几个就可以使用字体图标实现，像 hangge.com 右侧导航栏上的小图标用的也是字体图标）


二，Font Awesome 图标字体库
Font Awesome 是一套目前最受欢迎最全面的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标和社交网络图标、Web 应用程序图标和编辑器图标等等。

网站地址：官网地址  GitHub地址

主要特色如下：
✓ 一种字体，包含605个图标（截至4.5.0版本）；
✓ 纯 CSS 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果；
✓ 无限缩放，矢量图标在任何尺寸下都一模一样；
✓ 免费使用，包括商业和非商业项目；
✓ 支持 Internet Explorer 7 浏览器；
✓ 能够在 Retina 屏幕完美呈现；
✓ 简单，易用；
✓ 对设计师友好，设计师能够轻松使用；
✓ 和其它图标字体不同，兼容屏幕阅读器；

下面只是字体库中一小部分图标（点击此处查看全部）：


三，Swift中Font Awesome的使用配置
（1）首先将字体库 FontAwesome.ttf 添加到项目中（如果不叫这个名字改成这个名字，下面会解释原因）

（2）“项目”->“Build Phases”->“Copy Bundle Resources”中把 FontAwesome.ttf 加进来。

（3）下载一个Font Awesome的Swift封装库，方便我们使用Font Awesome。GitHub地址：Font-Awesome-Swift
然后将 FAIcon.swift 添加到项目中即可（其默认调用的字体文件名叫FontAwesome.ttf，也可将其改成其他的）。


四，Swift中Font Awesome的使用样例
由于 FAIcon.swift 定义了个枚举类（FAType）把描述文字和字符编码都对应起来，同时对常用的UI组件（比如UITabBarItem，UIButton，UILabel，UIImageView，UITabBarItem，UISegmentedControl，UIImage）进行了扩展。所以，我们可以很方便地使用Font Awesome字体库。

1，UIImageView上使用文字图标
可以选择是否需要背景色（左图背景透明，右图有灰色背景）
imageView1.setFAIconWithName(icon: FAType.FATwitter, textColor: .blue)

imageView2.setFAIconWithName(icon: FAType.FATwitter, textColor: .blue, backgroundColor: .gray)

2，UILabel上使用文字图标
（1）可以直接使用图标（支持设置图标大小）
//直接使用图标
label1.FAIcon = FAType.FAGithub
//直接使用图标并设置图标大小
label2.setFAIcon(icon: FAType.FAGithub, iconSize: 35)
（2）支持图文混排（同时图标大小可以单独设置，和文字大小不一样） 
label1.setFAText(prefixText: "欢迎关注我的微博 ", icon: FAType.FAWeibo,
    postfixText: ". 谢谢!", size: 20)

// 使用大图标
label2.setFAText(prefixText: "欢迎关注我的微博 ", icon: FAType.FAWeibo,
    postfixText: ". 谢谢!", size: 20, iconSize: 30)
（3）文字和图标颜色也是可以改变的 
label2.textColor = .blue

3，UIButton上使用文字图标
（1）可以单独使用图标（支持设置图标大小）
button1.setFAIcon(icon: FAType.FAPlay, forState: .normal)

// 设置图标大小
button2.setFAIcon(icon: FAType.FAPlay, iconSize: 35, forState: .normal)
（2）支持同时有文字和图标的按钮（图标大小可以单独设置，和文字大小不一样）
button1.setFAText(prefixText: "", icon: FAType.FASearch, postfixText: " 查询",
                  size: 20, forState: .normal)

// 大图标按钮
button2.setFAText(prefixText: "点击 ", icon: FAType.FASearch, postfixText: " 查询",
                  size: 20, forState: .normal, iconSize: 30)
（3）改变按钮颜色
button2.setFATitleColor(color: .orange, forState: .normal)

4，UIBarButtonItem上使用文字图标
其用法和UIButton一样，具体可参考UIButton的文字图标使用。


5，UISegmentedControl上使用文字图标
segmentedControl.setFAIcon(icon: FAType.FAPhone, forSegmentAtIndex: 0)
segmentedControl.setFAIcon(icon: FAType.FAComment, forSegmentAtIndex: 1)
segmentedControl.setFAIcon(icon: FAType.FAEnvelope, forSegmentAtIndex: 2)

6，UITabbarItem上使用文字图标

tabBarController?.tabBar.items?.first?.setFAIcon(icon: FAType.FATwitter)
tabBarController?.tabBar.items![1].setFAIcon(icon: FAType.FAWeixin)
tabBarController?.tabBar.items![2].setFAIcon(icon: FAType.FAQq)

7，UISlider上使用文字图标
slider1.setFAMinimumValueImage(icon: .FABellSlashO)
slider1.setFAMaximumValueImage(icon: .FABellO)

// 使用大图标
slider2.setFAMinimumValueImage(icon: .FABellSlashO, customSize: CGSize(width:35, height:35))
slider2.setFAMaximumValueImage(icon: .FABellO, customSize: CGSize(width:35, height:35))

8，源码下载：hangge_959.zip

评论

全部评论（2）

回到顶部