字体图标
# 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的图标就不能使用了,介意者慎用。
替换完成后,可使用控件中的字体图标支持来验证安装是否正确。