FastWeb 字体图标

  字体图标是在字体文件中置入图标，使用对应的名称就可引入相应的图标。

  字体图标相对于传统的图片图标，有以下优势：

• 用CSS控制样式：可以使用CSS来控制图标的字体颜色，大小，阴影等。
• 无限缩放：采用矢量图构造，每个图标都可以自由进行放大或缩小操作，让每个图标在进行放大或者缩小操作时看起来都显示正常。
• 高清显示支持：由于其图标的特性，在高分辨率的屏幕上也能完美呈现。

  如需要了解所有的图标类型，点击https://fontawesome.com/v4.7/icons/ (opens new window)查看所有可用的图标。

1. 在FastWeb中使用字体图标

  FastWeb中也有部分控件与功能支持字体图标的显示。

1.1. 菜单列表中字体图标的支持

  FastWeb的菜单也支持字体图标的显示。点击[系统工具]-[菜单列表]，打开的菜单列表中可以看到菜单图标的字样，此处的菜单图标表示可以使用字体图标的名称，在菜单栏中引入对应的图标。

  假设我们在系统管理的菜单栏设置中修改菜单图标名称为cog后，刷新并重新登录查看。

  可以注意到系统管理的菜单图标显示为齿轮状。

1.2. 控件中的字体图标支持

  FastWeb中带有ImageIndex与Images属性的控件除了支持传统的图片图标外，还支持字体图标样式的引入。使用TUgIconClsList可引入对字体图标的支持，以下以TUgButton为例进行说明。

  按照FastWeb快速上手为例创建模块进入至模块编辑页面，在界面上放置一个TUgIconClsList与TUgButton，双击UgIconClsList，打开字体图标列表编辑界面，可以在其中输入字体图标的名称。

  在输入名称后可以看到图标的最终显示效果。

  在UgButton01中设置ImageIndex属性为0，Images设置为UGIconClsList01。

  设置完后，可以看到按钮上显示序号为0对应的图标（齿轮）。

2. 在FastWeb中导入自定义字体图标

  FastWeb中也支持导入自定义的字体图标。此次说明我们以IconFont (opens new window)为例介绍如何在其中引入字体图标。

  首先，在IconFont中注册并登录。

  点击图示，进入项目界面。

  然后点右上方红色的新建项目的按钮，填写项目名称即可完成新建项目。

  然后添加图标，直接在搜索栏搜索需要的图标 ，例如搜索主页：

  然后鼠标放到想要的图标上，点击购物车图标加入收藏。然后点击右上角的购物车。

  点击添加至项目，选择刚才新建的项目。

  添加完成后，会自动跳转到项目列表的界面，然后切换到Font class分类，点击下载。

  下载完压缩包，此处需要工具unitools，将自定义的字体将unigui自带的图标字体替换掉。

  打开工具，首先选择该项目Ext目录，如果项目没有指定ExtRoot，则ext目录为UniGui的安装目录。然后选择刚才下载的压缩包。即可完成图标的替换，如下图：

  此处说明，UniGUi中已经内置了两个图标字体。一个是awesome，另一个是pictos，pictos中内置了104个图标，此工具的作用是，把pictos替换成iconfont的图标。替换后，原pictos的图标就不能使用了，介意者慎用。

  替换完成后，可使用控件中的字体图标支持来验证安装是否正确。