ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

(40)UniGUI for CBuilder and Delphi如何使用FontAwesome图标字体

2020-11-30 15:57:54  阅读:369  来源: 互联网

标签:UniGUI Items Delphi Caption 字体 FontAwesome UnimSegmentedButton1 图标


(同一个世界,同一个梦想,交流学习C++Builder and Delphi XE10,传承c++builder and Delphi的魅力!欢迎各地朋友加入我的QQ群484979943,进群密码“BCB”,同时也请将该群号广为宣传,希望能够广集各方高手,共同进步。如需下载开发工具及源代码请加入我的QQ群。)

【阅读倡议】

1、有问题请留言;

2、没问题请点赞;

3、看连载请加群;

4、下源码请加群;

【开发工具】

1、C++Builder and Delphi 10.3.3

2、FMSoft_uniGUI_Complete_Professional_1.70.0.1531(正版)

本人主笔的国内第一本uniGUI教学案例代码已诞生,分为cbuilder和delphi两个版本,买代码送教程,需要的朋友可以加入我的QQ技术交流群484979943给我(群主)留言。资料简介:

Font Awesome是一套绝佳的图标字体库和CCS框架,为我们提供了一套可以缩放的矢量图标,我们可以用CSS所提供的所有特性对它们进行设置,包括字体大小、颜色、阴影或者其它任何支持的效果,有了它,我们就可以为我们的UniGUI项目的各个控件的标签配置各种各样的图标字体。图标字体:即图片样式的字体,和字体具有一样的属性,表现出来的却是小图片。

1、布局

创建一个项目,在MainmForm上添加一个UnimBitBtn、一个UnimLabel、一个UnimTabPanel、一个UnimSegmentedButton,为UnimTabPanel1创建两个UnimTabSheet,为UnimSegmentedButton1创建三个UnimButtonItem。

【注意】如果是电脑版项目,请先将UniLabel的TextConversion属性设置为txtHTML。

 

2、功能

为每个控件的Caption设置一个图标字体,让其能够关联图标字体库,显示一个漂亮的小图标,以提升我们的UniGUI项目的视觉效果。

3、代码


1)、下载免费的FontAweSome离线图标库,下载地址为 https://fontawesome.com/download ,选择FreeForWeb

2)、将下载的图标字体包fontawesome-free-5.13.0-web.zip复制到你的项目的Win32\Debug\files目录下,并解压缩。

3)、打开UniServerModule窗口,配置其CustomFiles属性,增加一行语句引用图标字体包,如下所示:

<link rel="stylesheet" href="files/fontawesome-free-5.13.0-web/css/all.css">

4)、图标字体使用方法

“fas”表示图标字体的类别,“fa-bell”表示图标字体的名称,图标字体的各种Style类别、StylePrefix前缀名、Example应用举例和对应的Rendering例图如下图所示:


5)、选择可用的图标字体样式https://fontawesome.com/icons?d=listing&s=regular&m=free

打开图标字体样式网页后,在左侧选择“Free”、“Solid”后右侧将出现可用的免费的Solid类别的图标字体,如果想用第二个图标“address-book”,则在使用时要在该名称前增加“fa-”来引用图标字体,即:

Unimlabel1.caption:='<i class="fas   fa-address-book" style=color:red></i>字体图标';

 

6)、MainmForm的OnShow代码

Delphi版:

procedure TMainmForm.UnimFormShow(Sender: TObject);

begin

UnimSegmentedButton1.Items[0].Caption := '<i class="fas fa-bell" style=color:tomato></i>第一按钮';

UnimSegmentedButton1.Items[1].Caption := '<i class="fas fa-angry" style=color:tomato></i>第二按钮';

UnimSegmentedButton1.Items[2].Caption := '<i class="fas fa-envelope" style=color:tomato></i>第三按钮';

Unimlabel1.caption:='<i class="fas fa-bell" style=color:red></i>字体图标';

UnimBitBtn1.caption:='<i class="fas fa-bell" style=color:green></i>字体图标';

UnimTabSheet1.caption:='<i class="fas fa-adjust" style=color:yellow></i>字体图标';

UnimTabSheet2.caption:='<i class="fab fa-angellist" style=color:green></i>字体图标';

end;

 

cBuilder版:

void __fastcall TMainmForm::UnimFormShow(TObject *Sender)

{

UnimSegmentedButton1->Items->Items[0]->Caption = "<i class=\"fas fa-bell\" style=color:tomato></i>第一按钮";

UnimSegmentedButton1->Items->Items[1]->Caption = "<i class=\"fas fa-angry\" style=color:tomato></i>第二按钮";

UnimSegmentedButton1->Items->Items[2]->Caption = "<i class=\"fas fa-envelope\" style=color:tomato></i>第三按钮";

UnimLabel1->Caption="<i class=\"fas fa-bell\" style=color:red></i>字体图标";

UnimBitBtn1->Caption="<i class=\"fas fa-bell\" style=color:green></i>字体图标";

UnimTabSheet1->Caption="<i class=\"fas fa-adjust\" style=color:yellow></i>字体图标";

UnimTabSheet2->Caption="<i class=\"fab fa-angellist\" style=color:green></i>字体图标";

}

 

4、效果

 

标签:UniGUI,Items,Delphi,Caption,字体,FontAwesome,UnimSegmentedButton1,图标
来源: https://blog.csdn.net/martian6125/article/details/110390052

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有