QML中使用FontAwesome字体图标

怼烎@ 2022-10-29 09:16 331阅读 0赞

# 0.前言 #

FontAwesome是一套可免费使用的字体图标库，官网介绍：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70][]

可通过如下链接获取对应的字库文件：

官网：[https://fontawesome.com/][https_fontawesome.com]

中文网（含v4下载）：[http://www.fontawesome.com.cn/][http_www.fontawesome.com.cn]

新版下载：[https://fontawesome.com/download][https_fontawesome.com_download]

GitHub：[https://github.com/FortAwesome/Font-Awesome][https_github.com_FortAwesome_Font-Awesome]

如果下载的第四版，那么可以用 fontawesome-webfont.ttf 这个文件，对应字体名称 "FontAwesome"。如果下的第五版会有三个字体（选择 ttf 或者 otf 使用）：

![20210211001522354.png][]

实测 solid 的支持好一点，QML 里 brands 大部分都没法显示。下图左侧为 solid，右侧为 regular：

# ![20210211001425937.png][]   1.加载及使用 #

要在 QML 中使用该字体，有两种常用加载方式。

一是 cpp 中加载：

QGuiApplication app(argc, argv);
    
        //加载字体并打印名称
        const int font_id = QFontDatabase::addApplicationFont(":/Font Awesome 5 Free-Solid-900.otf");
        qDebug() << QFontDatabase::applicationFontFamilies(font_id);

加载后使用：

Text{
                //这是获取的打印的名称
                font.family: "Font Awesome 5 Free Solid"
                font.pixelSize: 30
                text: "\uf004"
            }

二是 QML 中加载与使用：

FontLoader{
            id: awe_loader
            source: "qrc:/Font Awesome 5 Free-Solid-900.otf"
        }
    
        Text{
            font.family: awe_loader.name
            font.pixelSize: 30
            text: "\uf004"
        }

可以看到 text 都是填的一个 unicode 码， 对应表可以查看文档：[https://fontawesome.com/cheatsheet][https_fontawesome.com_cheatsheet] （好像公司图标默认是没包含在默认的免费字库里的）

如文档上有一个船锚的图标 unicode 值为 f13d：

![20210211002933735.png][]

那么可以这样使用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 1][]

# 2.参考 #

参照博客：[https://blog.csdn.net/zhengtianzuo06/article/details/78505508][https_blog.csdn.net_zhengtianzuo06_article_details_78505508]

参照博客：[https://blog.csdn.net/dingke2010/article/details/104735035][https_blog.csdn.net_dingke2010_article_details_104735035]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70]: /images/20221024/7a45435a057c458181f0d930b064550b.png
[https_fontawesome.com]: https://fontawesome.com/
[http_www.fontawesome.com.cn]: http://www.fontawesome.com.cn/
[https_fontawesome.com_download]: https://fontawesome.com/download
[https_github.com_FortAwesome_Font-Awesome]: https://github.com/FortAwesome/Font-Awesome
[20210211001522354.png]: /images/20221024/b0770f0dedbb482dbbfbcd1d9649358a.png
[20210211001425937.png]: /images/20221024/87237e6ea991492e82babc3c51b8dc9f.png
[https_fontawesome.com_cheatsheet]: https://fontawesome.com/cheatsheet
[20210211002933735.png]: /images/20221024/3274b7559bbb434eafc8d38dd0678cd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70 1]: /images/20221024/ce9b2700d3bd462ab103716340ff1efc.png
[https_blog.csdn.net_zhengtianzuo06_article_details_78505508]: https://blog.csdn.net/zhengtianzuo06/article/details/78505508
[https_blog.csdn.net_dingke2010_article_details_104735035]: https://blog.csdn.net/dingke2010/article/details/104735035