icon图标使用指南

系统图标使用指南

一．配置视图图标

行按钮和列按钮操作一样，只是显示位置不同，此处拿列按钮示例。不理解的请参考知识库中“行按钮”及“列按钮”说明。

平台提供的视图图标库路径：

tbp-web-app\WebContent\style\default\images\icons，需要使用的时候，在eOMP 工具中，视图工具树--视图模型—列按钮集合：

现已“阅读”按钮为例

通过“添加按钮”按钮新增行按钮，中文处编辑“阅读”，图标处编辑“icon-view”，再回到表单URL中，即可看到刚刚添加的行按钮。

同样，视图需要使用其他图标的时候，只需在目录中找到相应的图标，然后在eOMP工具中配置图标名，格式为“icon”+“-”+“图标文件名”（忽略文件名后缀）。

二．配置表单按钮

平台提供的表单图标库路径：

tbp-web-app\WebContent\style\uur\icons，需要使用的时候，在eOMP工具中，表单工具树—其他配置—按钮配置：

现已“删除”按钮为例

通过“新增按钮”添加，中文处编辑“删除”，图标处编辑“icon-add”，再回到视图URL中，即可看到刚刚添加的按钮。

同样，视图需要使用其他图标的时候，只需在目录中找到相应的图标，然后在

eOMP工具中配置图标名，格式为“icon”+“-”+“图标文件名”（忽略文件名后缀）。

三．解决配置好但是无法显示及自定义图标支持

不常用的图标可能不支持，导致无法显示，需手动添加。

现已tbp-web-app\WebContent\style\default\images\icons\pencil.png为例。

1.先配好按钮

2. 发现无法显示

3.IE下F12进入开发人员工具，选择“单击选择元素”，并选中刚才的铅笔

4.观察开发工具中显示的信息

这就是刚才配的按钮图标

右边的样式信息中icon-css中并没有包含icon-pencil，所以才无法显示

如果我们点击能显示的“阅读”就能看到icon.css中包含的信息

5.找到icon.css。这里找到的是

tbp-web-app\WebContent\style\default\css\icon.css

在其中添加如下代码：

.icon-pencil{

background:url('../images/icons/pencil.png')no-repeat!important; }

这样，清除缓存刷新后，我们要的图标就出来了

同理，需要使用自定义图标的话，也是在icon-css中添加如下代码：

.icon-asdf{

background:url('../images/icons/asdf.xxx')no-repeat!important; }

icon-asdf 中，asdf为你需要自定义的图标文件名，例如“map”，则为icon-map；url为你的图标与此icon-css文件的相对路径，此处表示该icon.css绝对路径下往上一层目录下images\icons下的路径。

四．常用图标信息

1.视图中常用图标

icon-add icon-apply icon-attachment icon-back icon-cancle icon-config icon-log icon-folder icon-save icon-word icon-search-row icon-delete icon-print icon-redo icon-undo 2.表单中常用图标

icon-add icon-about icon-back icon-btn_down icon-btn_collapse icon-btn_expand icon-btn_left icon-btn_right icon-btn_up icon-delete icon-butCollapse icon-butExpand icon-doc icon-find icon-folder