(40)UniGUIforCBuilderandDelphi如何使用FontAwesome图标字体

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

【阅读倡议】

1、有问题请留言;

2、没问题请点赞;

3、看连载请加群;

4、下源码请加群;

【开发工具】

1、C&＃43;&＃43;Builder and Delphi 10.3.3

2、FMSoft_uniGUI_Complete_Professional_1.70.0.1531&＃xff08;正版&＃xff09;

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

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

1、布局

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

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

2、功能

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

3、代码

1&＃xff09;、下载免费的FontAweSome离线图标库&＃xff0c;下载地址为 https://fontawesome.com/download &＃xff0c;选择FreeForWeb

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

3&＃xff09;、打开UniServerModule窗口&＃xff0c;配置其CustomFiles属性&＃xff0c;增加一行语句引用图标字体包&＃xff0c;如下所示&＃xff1a;

4&＃xff09;、图标字体使用方法

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

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

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

Unimlabel1.caption:&＃61;&＃39;fa-address-book" style&＃61;color:red>字体图标&＃39;;

6&＃xff09;、MainmForm的OnShow代码

Delphi版&＃xff1a;

procedure TMainmForm.UnimFormShow(Sender: TObject);

begin

UnimSegmentedButton1.Items[0].Caption :&＃61; &＃39;第一按钮&＃39;;

UnimSegmentedButton1.Items[1].Caption :&＃61; &＃39;第二按钮&＃39;;

UnimSegmentedButton1.Items[2].Caption :&＃61; &＃39;第三按钮&＃39;;

Unimlabel1.caption:&＃61;&＃39;字体图标&＃39;;

UnimBitBtn1.caption:&＃61;&＃39;字体图标&＃39;;

UnimTabSheet1.caption:&＃61;&＃39;字体图标&＃39;;

UnimTabSheet2.caption:&＃61;&＃39;字体图标&＃39;;

end;

cBuilder版&＃xff1a;

void __fastcall TMainmForm::UnimFormShow(TObject *Sender)

{

UnimSegmentedButton1->Items->Items[0]->Caption &＃61; "第一按钮";

UnimSegmentedButton1->Items->Items[1]->Caption &＃61; "第二按钮";

UnimSegmentedButton1->Items->Items[2]->Caption &＃61; "第三按钮";

UnimLabel1->Caption&＃61;"字体图标";

UnimBitBtn1->Caption&＃61;"字体图标";

UnimTabSheet1->Caption&＃61;"字体图标";

UnimTabSheet2->Caption&＃61;"字体图标";

}

4、效果