Qml使用阿里字体图标库及FontAwesome字体图标库

导入阿里字体图标库

1.下载需要的字体图标
2.将对应的ttf文件导入到工程资源文件(最好放在.qrc的一级目录下)

Qml使用阿里字体图标库及FontAwesome字体图标库_第1张图片

3.在main函数导入字体图标库
if (QFontDatabase::addApplicationFont(QLatin1String(":/iconfont.ttf")) == -1)
        qWarning() << "Failed to load fontello.ttf";

Qml使用阿里字体图标库及FontAwesome字体图标库_第2张图片

4.使用
    Button{
        id:btn1
        Text {
            text:"\ue619"   //重点 --阿里字体库的代码 更改为\ue619才能正确显示
            font.family:"iconfont"
            font.pixelSize: 25
            color: btn1.hovered ? "red" : "white"
        }
        height: 30
        width: 30
        anchors.right: parent.right
        anchors.top:parent.top
        anchors.topMargin: 10
        anchors.rightMargin: 10
        background: Rectangle{
            anchors.fill: parent
            color:"transparent"
        }
        onClicked: {
            mainWindow.close()
        }
    }

在这里插入图片描述

导入FontAwesome字体图标库

1.下载FontAwesome字体图标库
2.将对应的otf文件导入到工程资源文件(最好放在.qrc的一级目录下)

Qml使用阿里字体图标库及FontAwesome字体图标库_第3张图片

3.在main函数导入字体图标库
if (QFontDatabase::addApplicationFont(QLatin1String(":/Font Awesome 6 Free-Solid-		900.otf")) == -1)
    qWarning() << "Failed to load fontello.ttf";
    else   qDebug()<< QFontDatabase::applicationFontFamilies
                (QFontDatabase::addApplicationFont
                (QLatin1String(":/Font Awesome 6 Free-Solid-900.otf"))); //打印font.family
4.使用
Button{
        id:btn2
        height: 30
        width: 30
        anchors.right: parent.right
        anchors.top:parent.top
        anchors.topMargin: 10
        anchors.rightMargin: 10
        background: Rectangle{
            anchors.fill: parent
            color:"transparent"
        }
        onClicked: {
            mainWindow.close()
        }
        Text {
            width: parent.width
            height: parent.height
            text: "\uf00d" //f00d官方代码,前面加上\u
            font.family:"Font Awesome 6 Free Solid" //main函数打印出来的名字
            font.pixelSize: 25
            color: btn2.hovered ? "red" : "white"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

    }

在这里插入图片描述

你可能感兴趣的:(Qml,c++,qt)