系统图标使用指南
一．配置视图图标
行按钮和列按钮操作一样，只是显示位置不同，此处拿列按钮示例。不理解的请参考知识库中“行按钮”及“列按钮”说明。
平台提供的视图图标库路径：
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.观察开发工具中显示的信息
这就是刚才配的按钮图标 <span class=”icon-pencil” pad-left>
右边的样式信息中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图标库
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。