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

导入阿里字体图标库

1.下载需要的字体图标

2.将对应的ttf文件导入到工程资源文件（最好放在.qrc的一级目录下）

3.在main函数导入字体图标库

if (QFontDatabase::addApplicationFont(QLatin1String(":/iconfont.ttf")) == -1)qWarning() << "Failed to load fontello.ttf";

4.使用

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

导入FontAwesome字体图标库

1.下载FontAwesome字体图标库

2.将对应的otf文件导入到工程资源文件（最好放在.qrc的一级目录下）

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:btn2height: 30width: 30anchors.right: parent.rightanchors.top:parent.topanchors.topMargin: 10anchors.rightMargin: 10background: Rectangle{anchors.fill: parentcolor:"transparent"}onClicked: {mainWindow.close()}Text {width: parent.widthheight: parent.heighttext: "\uf00d" //f00d官方代码,前面加上\ufont.family:"Font Awesome 6 Free Solid" //main函数打印出来的名字font.pixelSize: 25color: btn2.hovered ? "red" : "white"verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCenter}}

Qml使用阿里字体图标库及FontAwesome字体图标库相关推荐

wordcloud：利用fontawesome字体绘制图标词云图
根据文本生成词云的操作很常见,在某些场景下,我们可以遇到图标也按照某种形状排列的情况,那么可以用生成词云图的方法生成这样的图标词云图吗? 如何应用fontawesome字体当前最常见的图标字体就是w ...
使用font-awesome字体图标库，让你的网站好看10倍
前言在网站开发中,往往需要加上一些图标的点缀来使页面显得更加美观和友好.但是对于一些缺乏设计能力的人员(比如本人),想自己制作一套好看的图标比较麻烦.font-awesome可以帮助我们解决这个问题 ...
vue使用最新版font-awesome字体图标库（内附花式玩法）
安装安装基础依赖: 进入 Vue 项目文件夹,执行如下命令安装基础依赖库. npm i --save @fortawesome/fontawesome-svg-core npm i --save @ ...
字体库（阿里巴巴矢量图标库）使用两三坑
众所周知,"微软雅黑" 是个炸弹,不敢碰.上网一查,有个"思源黑体",免费,好看,就它了! 字体库有两种使用方法: 本地使用一.下载字体库推荐地址:字体天下 ...
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
Qt Qml 查看所有字体、添加字体库、使用字体库的方法
最近换了项目里的字体,所以整理一下qt设置字体相关的一点内容, 主要包括: 1.查看当前系统里所有字体的名称 2.添加路径下的字体库 3.使用字体库一.查看当前Qt所有字体的名称为什么要查看字体名 ...
在Vue+Element ui 项目中如何使用iconfont（阿里图标库）中的图标
在项目过程中,element ui 中自带的图标往往满足不了自己的需求,那么如何在项目中使用iconfont的图标呢? 在iconfont中新建一个项目找到自己想要的图标,加入购物车,加入完成后点击 ...
如何在AxureRP7中使用FontAwesome字体
我们使用Axure制作原型时,经常会使用到各种小图标.有些朋友自己制作.有些到网上下载,然后使用截图导入到Axure中使用.这样做非常繁琐,有些朋友问Axure是否能够像图像处理工具那样便捷灵活滴使用 ...
使用fontawesome字体
ant design pro是摈弃font字体图标的,取而代之的是svg.这是一种好的做法,可以更加自由并且系统体积也更小了.但是amis采用font-awesome字体图标,这就有点问题,我们必须兼 ...
CSS在线字体库，外部字体的引用方法@font-face
[新增]使用自己下载的字体的示例: 参考 http://www.w3cplus.com/content/css3-font-face @font-face{ font-family: &quo ...

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

导入阿里字体图标库

1.下载需要的字体图标

2.将对应的ttf文件导入到工程资源文件（最好放在.qrc的一级目录下）

3.在main函数导入字体图标库

4.使用

导入FontAwesome字体图标库

1.下载FontAwesome字体图标库

2.将对应的otf文件导入到工程资源文件（最好放在.qrc的一级目录下）

3.在main函数导入字体图标库

4.使用

Qml使用阿里字体图标库及FontAwesome字体图标库相关推荐

最新文章

热门文章