delphi的unigui web开发中使用font awesome 字体

一、不必下载,unigui已内置该字体及调用

其实,unigui 1.90中就含有font awesome字体的模块,我们不必再从其官网下载。

当然要下载,从以下位置下载官方套件: Download Font Awesome Free or Pro | Font Awesome 选择FreeForWeb  

在哪里呢,我截图出来,这是相其css文件及其路径,可以看出css是经过压缩的,我们vs code将其格式化

二、格式化css,方便查看

格式化后的css,这样就好多了,其中,我们可以看到其中的各种样式的设置。

三、怎样使用呢

我们平常是这样使用 ,下面代码可以放在procedure TMainForm.UniFormCreate(Sender: TObject);事件中去。

 UniLabel3.caption := '<i class="fa fa-camera-retro fa-lg"></i> fa-lg';

这行代码是在 Delphi UniGUI 框架中设置一个 UniLabel 控件的标题。

这段代码做了两件事:

  1. 它使用了 Font Awesome 图标库。Font Awesome 是一套非常流行的图标库,可以用于网页和应用程序。它提供了许多预定义的、可以通过 CSS 类名引用的图标。

  2. 它在标题中插入了一个图标,并且将该图标设置为较大(fa-lg)的尺寸。

让我们详细分析下这行代码:

  • <i class="fa fa-camera-retro fa-lg"></i>:这是一个 HTML 语句,它创建了一个 i 标签,并赋予了几个 CSS 类。"fa" 是 Font Awesome 的基本类,所有 Font Awesome 图标都需要这个类。"fa-camera-retro" 是指定图标类型的类,表示复古相机图标。"fa-lg" 是一个可选的类,用来增加图标的大小。

  • UniLabel3.caption:这是 Delphi 中设置 UniLabel 控件标题的方式。你可以将其设置为任何字符串,包括包含 HTML 标签的字符串。当你将它设置为包含 HTML 标签的字符串时,UniGUI 将会解析这些标签并按照你的要求渲染控件。

因此,整体上,这行代码设置了 UniLabel3 的标题为一个大号的复古相机图标,后面跟着文本 "fa-lg"。

这里有一个要点是要将textconversion设为txthtml

运行出来就成了

四、还有一种简便方法,直接设置其cls属性

你直接从css文件里面去找到相应的icon类就行了。我就从里面随便找的一个,经测试Ok.并且

前面一个要设至少两个"fa" 是 Font Awesome 的基本类,。"fa-exclamation-circle" 是指定图标类型的类。如果你中选后面的一个显示出来的只有一个框,因为fa负责设置好字体为awesome字体,才能正确显示。

以后只要指定相应控件的cls属性就可有图标可用了。下面是我测试的效果。用到了其中的多个图标

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/282781.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拖拽属性 draggable

H5 新增的属性 draggable&#xff0c;它能够给与一切的 html 元素拖动的效果。 拖拽元素 属性为 draggable"true" 的元素&#xff0c;可拖动&#xff0c;且拖动时鼠标变为禁用图标 ps: 直接写 draggable 可能无效 ondragstart 开始拖拽时触发&#xff08;按下鼠标…

一个简单的光线追踪渲染器

前言 本文参照自raytracing in one weekend教程&#xff0c;地址为&#xff1a;https://raytracing.github.io/books/RayTracingInOneWeekend.html 什么是光线追踪&#xff1f; 光线追踪模拟现实中的成像原理&#xff0c;通过模拟一条条直线在场景内反射折射&#xff0c;最终…

Java已死!

许多开发者仍然认为 Java 与当今时代息息相关&#xff0c;看完本文&#xff0c;你会发现 Java 的影响力已经大幅减弱。实际上&#xff0c;Java 是一种濒临灭绝的编程语言。尽管 Java 一直是世界上使用最广泛、最受欢迎的编程语言之一&#xff0c;但它很快就会面临消亡的危险。 …

【JavaEE】多线程(5) -- 阻塞队列

目录 1.阻塞队列是什么? 2.生产者消费者模型 3.标准库中的阻塞队列 4.阻塞队列的实现 1.阻塞队列是什么? 阻塞队列是⼀种特殊的队列. 也遵守 "先进先出" 的原则 阻塞队列能是⼀种线程安全的数据结构, 并且具有以下特性: 当队列满的时候, 继续⼊队列就会阻塞, …

ffmpeg6.0-ffplay.c源码分析(二)之整体框架大流程分析

文章目录 main()函数解读stream_open()函数解析event_loop函数解析关注公众号看全文: 想分析任何一个可执行程序,肯定从main()函数下手是比较合适的,ffplay的源代码也是如此。 main()函数解读 /* Called from the main */ int main(int argc, char **argv)

http状态码(一)400报错

一 400报错汇总 ① 综述 一、4xx状态码报错说明&#xff1a; 客户端行为导致的报错二、通用的4xxHTTP报错1) 4002) 4013) 4034) 4045) 405 --> 不允许方法&#xff0c;可能跨域或者nginx限制请求方法6) 4087) 4138) 419三、ngin自身定义的4xx报错495、496、497、498、4…

人生感悟 | 当前经济形势,给25~35岁的年轻人一点建议

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 这两年经济情况怎么样呢&#xff1f;相信大家都有自己的感觉。 且不说网上看到的“裁员裁到大动脉”“设计院欠薪”等各种新闻。 说自己和家人的亲身经历吧&#xff0c;这两年经历了被拖欠工资、公司缩编、换工作、公…

倚力未来:人工智能智能辅助医疗的前景与挑战

导言 人工智能在医疗领域的应用正迅速发展&#xff0c;为医疗行业带来了新的可能性。本文将深入探讨人工智能在医疗中的智能辅助应用&#xff0c;以及这一趋势面临的前景和挑战。智慧医疗是指通过先进的信息技术&#xff0c;如人工智能、物联网、大数据等&#xff0c;实现医疗数…

MybatisPlus进阶,UUID VS SnowFlake(雪花算法)

目录 一、什么是MybatisPlus 为什么要学MybatisPlus&#xff1f; 特性&#xff1a; 二、快速入门 2.1快速初始化一个空的spring boot 项目 2.2配置依赖 2.3配置(连接数据库) 2.4在spring boot启动类中添加MapperScan注解&#xff0c;扫描Mapper文件夹&#xff1a; 2.5…

CSS3 2D变形 过渡 动画

​​​​​ transform(2D变形)概述translate()平移scale()缩放skew()倾斜rotate()旋转transform-origin中心原点 CSS3 2D变形 3D变形 过渡 动画 在CSS3中&#xff0c;动画效果包括4个部分&#xff1a;变形&#xff08;transform&#xff09;、3D变形、过渡&#xff08;transit…

PyQt6 QMessageBox对话框控件

锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计48条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话版…

【算法Hot100系列】三数之和

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…