EasyUI_Icon_图标扩展样式（1775个）_easyuiiconcls大全,easyuiiconcls资源-CSDN文库

共1777个文件

png：1770个

gif：5个

html：1个

5星 · 超过95%的资源需积分: 47 92 浏览量 2017-02-09 14:59:15 上传评论 4 收藏 1.58MB ZIP 举报

EasyUI 是一个基于 jQuery 的 UI 组件库，它提供了丰富的用户界面组件，如表格、下拉菜单、对话框、按钮等，便于开发者构建美观且功能强大的 Web 应用程序。在给定的资源中，"EasyUI_Icon_图标扩展样式（1775个）" 是一个专门针对 EasyUI 图标设计的扩展样式集，包含了大量的图标，旨在增强 EasyUI 应用的视觉效果和用户体验。这个资源包含1775个图标，这些图标可能是矢量图形，支持多种尺寸和分辨率，可以在不同的设备和屏幕尺寸上保持清晰。使用这些图标可以为 EasyUI 的按钮、菜单项、工具栏和其他组件增添更多的视觉元素，使得应用的界面更加直观、易用。 EasyUI 图标的使用方法通常包括以下步骤： 1. **引入图标资源**：你需要将下载的图标资源文件引入到你的项目中。这可能是一个 CSS 文件或者包含 SVG 图标的文件夹。确保在页面中正确引用这些资源，以便浏览器能够加载和显示图标。 2. **定义图标类**：EasyUI 图标通常通过 CSS 类来实现。每个图标都有一个特定的类名，例如 "icon-add" 表示添加图标。在 HTML 中，你可以将这些类添加到需要显示图标的元素上，如 `<i>` 或 `<span>` 标签。 ```html <button class="easyui-linkbutton" iconCls="icon-add">添加</button> ``` 3. **样式调整**：虽然图标集已经预设了样式，但根据项目需求，你可能需要自定义图标大小、颜色或边距等属性。可以通过修改 CSS 样式来实现个性化调整。 4. **响应式设计**：确保图标在不同设备和屏幕尺寸下都能正确显示。这可能需要对图标大小和布局进行适当的媒体查询处理。 5. **兼容性检查**：由于图标可能依赖于 CSS3 或 SVG 支持，因此在不同浏览器中测试其兼容性是很重要的。确保图标在主流浏览器（如 Chrome、Firefox、Safari、Edge 和 IE11）中都能正常工作。 6. **优化性能**：大量图标可能会增加页面的加载时间，所以考虑使用懒加载技术或者只在需要时加载图标，以提高网页性能。在实际开发中，EasyUI 图标扩展样式可以极大地丰富你的应用界面，提供更佳的用户体验。同时，通过灵活的 CSS 样式调整，你可以创建符合品牌风格的定制化图标，进一步提升应用的专业感和一致性。记住，良好的界面设计不仅能吸引用户，也能促进他们更好地理解和使用应用的功能。

资源推荐

资源详情

资源评论

收起资源包目录

EasyUI_Icon_图标扩展样式（1775个）（1777个子文件）

IconExtension.css 163KB

view.gif 600B

ok.gif 563B

tree_checkbox_1.gif 237B

cancel.gif 226B

tree_checkbox_0.gif 168B

IconExtension.html 307KB

01.png 43KB

20130406011043129_easyicon_net_16.png 23KB

edit.png 22KB

piechart.png 1KB

people.png 1KB

download.png 1KB

pdf.png 1KB

survey.png 1KB

web.png 1KB

home.png 1KB

cabinet.png 1KB

book.png 1KB

wallet.png 1KB

client.png 1KB

shopping-bag.png 1KB

graph.png 1KB

delete.png 1KB

add.png 1KB

2012080412111.png 1KB

02.png 1KB

chart_pie_link.png 1021B

clock_start.png 1006B

chart_pie_error.png 989B

chart_pie_edit.png 986B

chart_pie_delete.png 983B

clock_stop_2.png 980B

sport_basketball.png 977B

chart_pie_add.png 975B

paint.png 973B

world_orbit.png 967B

clock_edit.png 967B

world_key.png 965B

world_connect.png 963B

clock_link.png 961B

clock_go.png 959B

world_link.png 957B

chart_pie_lightning.png 956B

clock_error.png 953B

clock_delete.png 952B

world_edit.png 945B

world_delete.png 945B

world_go.png 944B

clock_play.png 943B

world_add.png 940B

package_link.png 939B

style_edit.png 927B

clock_pause.png 927B

package_start.png 926B

clock_add.png 925B

world.png 923B

clock_stop.png 922B

chart_pie.png 918B

script_palette.png 917B

20130406014311476_easyicon_net_16.png 917B

package_in.png 915B

back.png 912B

cdr_cross.png 911B

telephone_link.png 909B

page_world.png 903B

package_add.png 899B

package_stop.png 899B

package_go.png 898B

package_se.png 898B

map_link.png 898B

house_key.png 897B

house_connect.png 896B

package_green.png 896B

cdr_edit.png 893B

telephone_edit.png 893B

color_wheel.png 892B

dvd_start.png 892B

package_delete.png 891B

cdr_start.png 891B

cog_start.png 891B

clock_red.png 889B

script_start.png 887B

flag_gg.png 887B

sport_tennis.png 884B

house_star.png 884B

telephone_error.png 884B

transmit_error.png 883B

book_addresses_edit.png 883B

printer_connect.png 883B

clock.png 882B

cdr_error.png 882B

bell_start.png 882B

time_go.png 882B

cd_stop.png 881B

telephone_key.png 881B

script_edit.png 880B

printer_cancel.png 879B

page_find.png 879B

cdr_magnify.png 879B

共 1777 条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图标集</title> <link type="text/css" href="IconExtension.css" rel="stylesheet" /> </head> <body> <input type='button' class='icon-01' title='icon-01' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-01 </div> <input type='button' class='icon-1012333' title='icon-1012333' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-1012333 </div> <input type='button' class='icon-2012080111634' title='icon-2012080111634' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080111634 </div> </br> <input type='button' class='icon-2012080404218' title='icon-2012080404218' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080404218 </div> <input type='button' class='icon-2012080404391' title='icon-2012080404391' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080404391 </div> <input type='button' class='icon-2012080407553' title='icon-2012080407553' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080407553 </div> </br> <input type='button' class='icon-2012080412111' title='icon-2012080412111' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080412111 </div> <input type='button' class='icon-201208041220' title='icon-201208041220' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-201208041220 </div> <input type='button' class='icon-2012080412263' title='icon-2012080412263' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080412263 </div> </br> <input type='button' class='icon-2012080412301' title='icon-2012080412301' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080412301 </div> <input type='button' class='icon-2012080412486' title='icon-2012080412486' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080412486 </div> <input type='button' class='icon-2012080412511' title='icon-2012080412511' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080412511 </div> </br> <input type='button' class='icon-2012080412901' title='icon-2012080412901' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012080412901 </div> <input type='button' class='icon-2012081511202' title='icon-2012081511202' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012081511202 </div> <input type='button' class='icon-2012081511767' title='icon-2012081511767' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012081511767 </div> </br> <input type='button' class='icon-2012081511913' title='icon-2012081511913' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012081511913 </div> <input type='button' class='icon-2012092109942' title='icon-2012092109942' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2012092109942 </div> <input type='button' class='icon-20130406011043129_easyicon_net_16' title='icon-20130406011043129_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406011043129_easyicon_net_16 </div> </br> <input type='button' class='icon-20130406011050744_easyicon_net_16' title='icon-20130406011050744_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406011050744_easyicon_net_16 </div> <input type='button' class='icon-2013040601125064_easyicon_net_16' title='icon-2013040601125064_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-2013040601125064_easyicon_net_16 </div> <input type='button' class='icon-20130406014211289_easyicon_net_16' title='icon-20130406014211289_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406014211289_easyicon_net_16 </div> </br> <input type='button' class='icon-20130406014311476_easyicon_net_16' title='icon-20130406014311476_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406014311476_easyicon_net_16 </div> <input type='button' class='icon-20130406014314162_easyicon_net_16' title='icon-20130406014314162_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406014314162_easyicon_net_16 </div> <input type='button' class='icon-20130406015709810_easyicon_net_16' title='icon-20130406015709810_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406015709810_easyicon_net_16 </div> </br> <input type='button' class='icon-20130406125519344_easyicon_net_16' title='icon-20130406125519344_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406125519344_easyicon_net_16 </div> <input type='button' class='icon-20130406125647919_easyicon_net_16' title='icon-20130406125647919_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406125647919_easyicon_net_16 </div> <input type='button' class='icon-20130406125821654_easyicon_net_16' title='icon-20130406125821654_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130406125821654_easyicon_net_16 </div> </br> <input type='button' class='icon-20130408025545236_easyicon_net_30' title='icon-20130408025545236_easyicon_net_30' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130408025545236_easyicon_net_30 </div> <input type='button' class='icon-20130410120031302_easyicon_net_16' title='icon-20130410120031302_easyicon_net_16' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-20130410120031302_easyicon_net_16 </div> <input type='button' class='icon-accept' title='icon-accept' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-accept </div> </br> <input type='button' class='icon-add' title='icon-add' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-add </div> <input type='button' class='icon-anchor' title='icon-anchor' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-anchor </div> <input type='button' class='icon-application' title='icon-application' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-application </div> </br> <input type='button' class='icon-application_add' title='icon-application_add' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-application_add </div> <input type='button' class='icon-application_cascade' title='icon-application_cascade' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-application_cascade </div> <input type='button' class='icon-application_delete' title='icon-application_delete' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-application_delete </div> </br> <input type='button' class='icon-application_double' title='icon-application_double' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-application_double </div> <input type='button' class='icon-application_edit' title='icon-application_edit' style='margin:2px;' /> <div style='display:inline-block;width:350px;'> icon-application_edit </div> <input type='button' class='

评论收藏

内容反馈