（同一个世界，同一个梦想，交流学习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、效果