![Web前端应用开发项目式教程(基于uni-app框架)](https://wfqqreader-1252317822.image.myqcloud.com/cover/578/50417578/b_50417578.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
1.4.3 字体图标
字体图标是在项目中通过字体形式使用的一种图标,在现在的软件开发中用来替代图片以展示页面中的图标,其原理是将图标制作成矢量字体文件,使用时如同在CSS中引入字体文件一样引入字体图标文件。字体图标已经成为现在的软件开发中解决小图片问题的常见手段,相比传统的图片资源,字体图标的使用更加简单、快捷,可减少网络通信量。因此,开发人员要紧跟技术发展步伐,与时俱进,这样才能设计最优的解决方案来完成开发任务。
![](https://epubservercos.yuewen.com/76EA3C/29686545703616106/epubprivate/OEBPS/Images/15_01.jpg?sign=1739331366-OtjYwK8kBObQEIQQgwESLgE8IDOlGLvQ-0-b16a4476cf21d7cf42bedb23f289591c)
了解uni-app 03之官方介绍上
目前国内项目常用的字体图标库之一为阿里巴巴矢量图标库(https://www.iconfont.cn/),使用方法主要有以下两种。
1.unicode引用
unicode是字体在网页端最原始的应用方式,使用步骤如下。
第一步:复制项目下面生成的font-face。
![](https://epubservercos.yuewen.com/76EA3C/29686545703616106/epubprivate/OEBPS/Images/15_02.jpg?sign=1739331366-P4Z9rPUbbWCUgg1D5gbayM4OYDwZNGQg-0-e487f27df37a7e328a3f4887346705d1)
第二步:定义使用iconfont的样式。
![](https://epubservercos.yuewen.com/76EA3C/29686545703616106/epubprivate/OEBPS/Images/15_03.jpg?sign=1739331366-tBeROPzc9wojH9GCke2j0dWfJUBbME5S-0-c93af09c60d99ee89014e5ebc2ad2e7e)
第三步:挑选相应图标并获取字体编码,应用于页面。
![](https://epubservercos.yuewen.com/76EA3C/29686545703616106/epubprivate/OEBPS/Images/15_04.jpg?sign=1739331366-WOLa56wNkOLYC1UYQWUsT9u58jAN2mAB-0-ab6ac2d446160381ef737f65aef68af5)
2.font-class引用
font-class是unicode使用方式的一种变种,主要解决unicode书写不直观、语意不明确的问题。使用步骤如下。
第一步:复制项目下面生成的font-class代码。
![](https://epubservercos.yuewen.com/76EA3C/29686545703616106/epubprivate/OEBPS/Images/15_05.jpg?sign=1739331366-0wz5bVvbTOGelJ4gQ6I5vomwUL3t0S3L-0-2e3df6117d78b9971fd131a323ae3fc1)
第二步:挑选相应图标并获取类名,应用于页面。
![](https://epubservercos.yuewen.com/76EA3C/29686545703616106/epubprivate/OEBPS/Images/15_06.jpg?sign=1739331366-uLjMWvMga3lTsFcR1jpCDyLM0tXEECeG-0-84682ee6edfc451d4bb76febe9cbc24b)
“启嘉校园”项目使用的是font-class引用方式,字体图标文件和CSS文件下载地址如下。
• 字体图标文件:https://book.change.tm/u/a3。
• CSS文件:https://book.change.tm/u/a4。
下载后的文件存放目录和使用方法将在后续任务中讲解,此处可先将文件下载并保存到便于查找的本地磁盘中备用。