icon图标使用指南.docVIP

系统图标使用指南 一．配置视图图标 行按钮和列按钮操作一样，只是显示位置不同，此处拿列按钮示例。不理解的请参考知识库中“行按钮”及“列按钮”说明。 平台提供的视图图标库路径： 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-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