icon图标使用指南

《icon图标使用指南》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、系统图标使用指南一．配置视图图标行按钮和列按钮操作一样，只是显示位置不同，此处拿列按钮示例。不理解的请参考知识库中“行按钮”及“列按钮”说明。平台提供的视图图标库路径：tbp-web-appWebContentstyledefaultimagesicons，需要使用的时候，在eOMP工具中，视图工具树--视图模型—列按钮集合：现已“阅读”按钮为例通过“添加按钮”按钮新增行按钮，中文处编辑“阅读”，图标处编辑“icon-view”，再回到表单URL中，即可看到刚刚添加的行按钮。同样，视图需要使用其他图标的时候，只需在目录中找到相应的图标，然后在eOMP工具

2、中配置图标名，格式为“icon”+“-”+“图标文件名”（忽略文件名后缀）。二．配置表单按钮平台提供的表单图标库路径：tbp-web-appWebContentstyleuuricons，需要使用的时候，在eOMP工具中，表单工具树—其他配置—按钮配置：现已“删除”按钮为例通过“新增按钮”添加，中文处编辑“删除”，图标处编辑“icon-add”，再回到视图URL中，即可看到刚刚添加的按钮。同样，视图需要使用其他图标的时候，只需在目录中找到相应的图标，然后在eOMP工具中配置图标名，格式为“icon”+“-”+“图标文件名”（忽略文件名后缀）。三．解决配置好

3、但是无法显示及自定义图标支持不常用的图标可能不支持，导致无法显示，需手动添加。现已tbp-web-appWebContentstyledefaultimagesiconspencil.png为例。1.先配好按钮2.发现无法显示3.IE下F12进入开发人员工具，选择“单击选择元素”，并选中刚才的铅笔4.观察开发工具中显示的信息这就是刚才配的按钮图标右边的样式信息中icon-css中并没有包含icon-pencil，所以才无法显示如果我们点击能显示的“阅读”就能看到icon.css中包含的信

4、息5.找到icon.css。这里找到的是tbp-web-appWebContentstyledefaultcssicon.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;

5、}icon-asdf中，asdf为你需要自定义的图标文件名，例如“map”，则为icon-map；url为你的图标与此icon-css文件的相对路径，此处表示该icon.css绝对路径下往上一层目录下imagesicons下的路径。四．常用图标信息1.视图中常用图标icon-addicon-applyicon-attachmenticon-backicon-cancleicon-configicon-logicon-foldericon-saveicon-wordicon-search-rowicon-deleteicon-printicon-redoicon-

6、undo2.表单中常用图标icon-addicon-abouticon-backicon-btn_downicon-btn_collapseicon-btn_lefticon-btn_righticon-btn_upicon-deleteicon-btn_expandicon-butCollapseicon-butExpandicon-docicon-findicon-folder