01 背景
【WordBN字远笔记】是天恩软件工作室开发的一款免费笔记软件；WordBN基于VS2019、Qt6.5开发，使用Qt Quick（QML）开发语言。
本课程将以【WordBN字远笔记】的界面为实战基础，详细介绍如何基于Qt/QML开发语言，从零开始开发一套真正的程序，包括国际化、版本发布、安装包制作等项目实战技巧。
本课程重点不是教你如何开发一个笔记软件，而是教你如何利用Qt/QML+C++开发一个完整的程序，整套课程规划有40+章节，敬请关注！
本章内容《#10 添加Font Awesome字体图标；自定义字体图标基础组件》
02 课程目标
- 在QML工程引入Font Awesome字体图标功能。
- 新建自定义字体图标基础组件YFontText，验证图标显示效果。
03 知识点
- 字体图标：字体图标（Font Icons）是一种利用字体文件（如.ttf、.woff、.svg等格式）来显示图标的技术。它通过特殊的字体文件将图标作为字符（glyphs）嵌入到字体中，然后通过CSS样式将这些字符（即图标）渲染在页面上。字体图标相比传统的图片图标（如PNG、JPEG等），具有可缩放性、可定制性、兼容性、轻量级、易于使用、更新和维护等多种优势：
- FontLoader：FontLoader是一个用于在QML页面中动态加载字体的元素，它允许开发者在应用程序运行时加载并使用自定义字体，而不是依赖于编译时包含的字体。FontLoader提供了灵活的方式来管理字体文件，支持通过名称、本地路径或网络URL等多种方式加载字体。
- Text元素：Text元素用于在QML应用程序中显示文本。它是一个非常灵活和强大的组件，允许你控制文本的显示方式，包括字体、颜色、对齐方式等。
04 下载Font Awesome字体图标库
- 下载文件：font-awesome-4.7.0.zip
- 解压到任意目录下，取出 fontawesome-webfont.ttf、font-awesome.css 文件
- fontawesome-webfont.ttf：字体图标文件，用于添加QT工程资源文件里面
- font-awesome.css：CSS文件，用于查找字体图标编码
05 添加字体图标文件到Qt工程
- 复制 fontawesome-webfont.ttf 文件到 源码工程根目录/resource 目录下：
- 修改CMakeLists.txt文件，添加 fontawesome-webfont.ttf 文件到 qtaddqml_module 代码位置，如下示例：
qt_add_qml_module(appYourWordBN
URI YourWordBN
VERSION 1.0
// ...
RESOURCES resource/fontawesome-webfont.ttf
}
06 加载字体图标文件
- 修改 YApplicationWindow.qml，利用 FontLoader 加载 fontawesome-webfont.ttf 字体，代码如下：
ApplicationWindow {
// ...
FontLoader {
source: "/YourWordBN/resource/fontawesome-webfont.ttf"
} // FontLoader
// ...
}
07 使用字体图标
- 新增 YFontText.qml 文件，使用 "FontAwesome" 字体名称，代码如下：
import QtQuick
Text {
font.family: "FontAwesome"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
- 显示字体图标效果，找到一个字体图标编码，如选择图标 fa-check 编码为 f00c，在QML里面使用代码如下：
YFontText {
text: "uf00c"
font.pointSize: 30
}
08 课后练习
- 学会查找指定图标字体编码：
- 用记事本打开 font-awesome.css，搜索 "fa-check" ，找到对应编码"f00c"，如下图：
- 查找笔记软件需要用到的图标，如退出程序、新建笔记、新建文件夹、帮助按钮等图标，用笔记软件记下来备用。
-End-
#想了解更多精彩内容，关注下方公众号，还有示例源码、开发工具免费下载。
本人小杨哥：
超20年C++开发经验，独立软件开发；著名开源产品高并发C++应用服务器MYCP作者；开源企业即时通讯软件Entboost首席架构师；开发有WordBN字远笔记等共享软件产品。
招C++/Qt开发学员，欢迎关注咨询~~
标签：10,Qt,文件,Awesome,字体,QML,webfont,ttf,图标 From： https://blog.csdn.net/yanghz/article/details/140580050