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

文章介绍了如何在Unigui1.90版本中利用内置的fontawesome字体模块,无需额外下载。讲解了如何在DelphiUniGUI中通过CSS类名插入图标,以及两种设置UniLabel控件标题的方法:一是使用HTML标签,二是直接设置cls属性。

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

一、不必下载,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属性就可有图标可用了。下面是我测试的效果。用到了其中的多个图标

这个文档中的话题与解决方案, 几乎全部来自 UniGUI 的交流群, 群中活跃的 BDS2007、 cmj 等人,给了众多使用 UniGUI 的人很多帮助。 这个文档, 主要是学习与方便后来之人, 文档积累的起因是严肃而正式的, 因为每个人 都有学习的需求;但文档的所谓版权、著述, 我希望它是有公益色彩的东西,如有哪位不希 望解决方案不出现在这里,请您告知。 此外, 就是期待大家都能把自己的一些经验, 给指导和帮助后来人的东西, 在不影响您 正常工作与其他事情的前提下,奉献出来。至于正确与错误、高超或低下,无关大体。 目 录 1. 事件中的代码在服务器端和客户端,哪一端执行? ........................................................... 3 2. 为什么 UniGUI 控件在 IE中显示的字体会变小、模糊? .................................................... 3 3. 在浏览器端不能使用 ShowMessage() .................................................................................... 5 4. 修改工程文件,使 exe 程序编译成 dll .................................................................................. 6 5. UniGUI 开发的 dll 如何发布 .................................................................................................... 7 6. uniGUI0.94 以 EXE形式发布程序的布署方法 ..................................................................... 13 7. uniGUI 执行程序部署有 3 种形式 ......................................................................................... 14 8. 在 UniGUI使用 ADO 的设置 .............................................................................................. 16 9. MainModule 怎样得到 js 变量的值 ...................................................................................... 16 10. TUniServerModule 和 TUniMainModule 这两模块有何区别 ....................................... 16 11. MainModule 里一般放什么, ServerModule 一般放什么? ....................................... 17 12. 主窗体的标题怎么去掉 ................................................................................................. 17 13. 用 ExtEvent 打开链接和下载文件 ................................................................................. 17 14. WebApplication 显示对话框 .......................................................................................... 17 15. Uni 中的 UniChart 的 Series增删 .................................................................................. 17 16. 怎样给每一个在线用户建立一套变量,在用户断开后立即清除 ............................. 18 17. TUniHiddenPanel 的作用 ................................................................................................ 18 18. UniDBGrid 如何转为 Excel供下载? ............................................................................. 18 19. uniGUI 实现 Excel的导出 .............................................................................................. 18 20. UniDBGrid Excel文件下载 .............................................................................................. 19 21. Excel文件导入系统 ........................................................................................................ 21 22. 文件转档与下载 ............................................................................................................. 21 23. Send File()应用 ............................................................................................................... 21 24. UniGUI 的 Canvas使用 ................................................................................................... 22 25. 动态生成 TTabSheet or TUniTabSheet ........................................................................... 22 26. UniGUI 中如果获得 Session情况 .................................................................................. 23 27. UniGUI Func 之 Sessions ............................................................................................... 23 28. uniGUI 通过 SessionList操作另外的登录用户 ............................................................ 24 29. UniGui 中如何监听 Session的开始与结束 ................................................................... 25 30. UniGUI 如何禁止关闭新窗口 ........................................................................................ 27 31. UniGUI 中控件类名的变化 ............................................................................................ 27 32. 再议 UniGUI使用 Grid+Rport 报表控件 (推荐此方法 ) ............................................. 28 33. UniGUI 的布局面板控件 TUniRegionPanel ................................................................... 28 34. UniGUI 使用报表 Grid+Report 的方法之一 (静态调用 ) ................................................ 28 35. UniGUI 使用报表 Grid+Report 的方法之二 (动态调用 ) ................................................ 28 36. UniGUI 中 Cookies 使用中文汉字的方法 ...................................................................... 28 37. UniGUI 如何实现压缩传输数据? ................................................................................ 29 38. UniGUI 的 ShowModal .................................................................................................... 29 39. UniGUI 前台用户如何在软件中点击一个按钮打开浏览器并打开地址? ................ 29 40. How To Make Caption In UniGUI? ................................................................................. 30 41. 在 UniGUI 的 UniHtmlFrame 中不能使用的 HTML 标签 .............................................. 30 42. 利用 UniGUI 中的 TUniPageControl 实现多页面 .......................................................... 30 43. UniGUI TreeView 处理 .................................................................................................... 31 44. UniGUI 设置超时 ........................................................................................................... 31 45. UniGUI 如何实现登陆页面 ............................................................................................ 31 46. UniGUI 如何实现超链接 ................................................................................................ 32 47. 从 ASP网站登录到 UniGUI 中 ....................................................................................... 32 48. UniGUI 数据库初始化要放到 MainModule 里 ............................................................. 32 49. UniGUI Cookies ................................................................................................................ 32 50. Form Inheritance ............................................................................................................. 33 51. UniGUI 组件中的 Client JavaScript Delphi 组件之间的操作 ......................................... 33 52. JS能取 Delphi 控件的值? ............................................................................................ 34 53. 写 js 的注意 .................................................................................................................... 34 54. unigui 结合 JS方法记录 ................................................................................................. 34 55. JS,Jquery获取各种屏幕的宽度和高度 ......................................................................... 35 56. uniGUI 动态建立 Form 及释放 ...................................................................................... 37 57. uniGUI 经验两则 uniTimer uniHtmlFrame .................................................................... 37 58. uniGUI 使用百度地图 api 进行标注 .............................................................................. 37 59. fileupload 的问题 ........................................................................................................... 38 60. unigui unidbgrid 显示列的合计值 ................................................................................. 38 61. UniGui 中设置 uniEdit 控件的 fieldLabel ,emptyText 等 Extjs 属性 .............................. 40 62. uniGUI 用 Grid++Report 报表插件设计保存报表 (For unigui ver:0.95.0.1045) ............ 40 63. UniGUI 的 TUniLoginForm 窗口自定义背景色 .............................................................. 46 64. uniGUI 显示 Warning: Form must be shown after it is created 的解决办法 ................. 46 65. 界面上的快捷方式 ......................................................................................................... 46 66. 调用 WebService............................................................................................................. 47 67. TUniTreeView 的 CheckBox ............................................................................................ 49 68. 通过 URL来获取相关参数 ............................................................................................ 52 69. uniDBGrid 实行多选表格行 ........................................................................................... 52 70. UniDBGrid 增加显示记录数的 label 及隐藏 refresh 按钮 ............................................ 56 71. 对 UniDBGrid 的单元格操作 .......................................................................................... 57 72. DBGrid 多选后计算问题(是否可以作为参考?) .................................................... 58 73. UniDBGrid 选择字段 Boolean 处理 ................................................................................ 59 74. UniDBGrid 自带 MultiSelect 无法使用【最新版可以】 ............................................... 60 75. 如何打开 URL,让系统看起来舒服点 ......................................................................... 61 76. 如何修改 UniGUI 下的中文信息 ................................................................................... 62 77. 如何实现 UniDBGrid 下字段显示按钮 .......................................................................... 62 78. 如何实现 UniDBGrid 下字段自动换行 .......................................................................... 62 79. 如何结合 kbmMW .......................................................................................................... 63 80. 如何规避浏览器访问时 ajax 异常 ................................................................................ 63 81. 事件操作时,如果出现等待效果 ................................................................................. 63 82. 登录页面和主页面切换之间碰到的异常 ..................................................................... 63 83. 让 Page 中切换 Tab效果稍微好一点 ........................................................................... 64 84. UniImage 可以嵌入 PNG图片 ....................................................................................... 64 85. UniImage 自带导入 PNG图片的问题 ........................................................................... 65
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值