为qml-bootstap更新Font Awesome 5

最新推荐文章于 2024-12-24 10:32:41 发布

Tnix

最新推荐文章于 2024-12-24 10:32:41 发布

阅读量428

点赞数

CC 4.0 BY-SA版权

分类专栏： QML 文章标签： qt qml bootstrap font awesome

本文链接：https://blog.csdn.net/zerg_nick/article/details/90206183

本文详细介绍了如何将Font Awesome 5整合到qml-bootstrap中，包括下载最新字体文件、添加到资源目录、编写自定义组件、修改variables/fontawesome.js以通过名称而非Unicode引用图标。通过这些步骤，解决了旧版Font Awesome图标不全的问题，提高了qml界面的美观性和易用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap风格的qml源码，让使用qml的时候方便很多。

但是这套源码已经很久没有更新，除了缺少一些样式之外，更令我头痛的是，它使用的Font Awesome 4比较老旧，缺少了很多图标，不能完全发挥出FontAwesome的优势。

在这个qml-bootstrap的基础上，如果直接向Qt Quick工程中导入和引用最新的FontAwesome5字体文件，就会出现图标确实和渲染错误的情况。

解决这个问题的思路，可以参考这个。

主要过程如下：

1. 官网下载最新的桌面版字体文件，免费版包含三个文件

2. 添加到已有的Bootstrap资源文件的fonts目录下

3. 编写一个自定义组件Fonts.qml放在同一个目录下，用来载入对应的字体文件

// Fonts.qml
pragma Singleton
import QtQuick 2.0
Item {
    id: fonts
    readonly property FontLoader fontAwesomeRegular: FontLoader {
        source: "./Font Awesome 5 Free-Regular-400.otf