样式设计中图标使用

直接使用图片文件

可以直接使用显示类元件中的图片元件(image)定义要显示的图标，将图标放入项目文件夹\web\images中或下级的文件夹中，然后将图片的地址传值给可视化的图片元件，用法可以参考“可视化元件手册”中“用户端元件（显示元件）”组中“Image | 图片”一节

jquery样式文件中定义的图标

• 新移动应用模板创建的项目，项目文件夹\web\styles中有一个jquery-ui图形样式文件，可直接使用，注意使用时配合调用项目文件夹\web\images下的图标图片文件
• 使用方式：使用文件中定义的样式类名称，用本章“用样式类定义样式”一节中方式调用
• 使用示例：选中开发过程中添加的HTML Tag任意类型显示或Pane显示块对象，为其样式类属性的Shared值添加类名称如：ui-icon-carat-1-n ui-widget-content ui-icon | 文件名称 | 定义内容说明 | | —- | —- | | jquery-ui.less | jquery显示图标的类名称定义文件 |

Bootstrap样式文件中定义的图标

• 新移动应用模板创建的项目，项目文件夹\web\styles中011-sprites.less是Bootstrap图标类名称及位置定义和黑色及白色类定义文件，对应的图标文件地址在002-variables.less定义，图标文件放于项目文件夹\web\images\bootstrap中

• 使用方式：使用文件中定义的样式类名称，用本章“用样式类定义样式”一节中方式调用

  
  

  Bootstrap样式文件中用CSS标签定义的图标

• 新移动应用模板创建的项目，项目文件夹\web\styles\other中有一个CSS样式定义的图形库文件，不能直接使用，需将变量定义方式改为值定义后使用

• 注意图标使用，用本章“用样式类定义样式”一节中方式调用 | 文件名称 | 定义内容说明 | | —- | —- | | 100-shapesLib.less | 用CSS标签设计的图标的样式定义，比如圆形正方形/五角形/三角形/心形/阴阳等图标，需将变量定义改为实际值再使用 |

• 以上文件中的图标可以参考在线示例：http://css-tricks.com/examples/ShapesOfCSS/

  
  

  添加CSS标签自定义的图标样式

  比如为一个同样大的圆形绿图标添加闪动样式，可以将以下类名称的样式定义内容加入项目中的任意一个样式文件中(通常建议放到general.less文件中)，然后将 roundblink roundgreen 样式类名称添加到一个HTML Tag显示元件的样式类(html.styleClass)属性shared值中即可，同样是用本章“用样式类定义样式”一节中方式进行调用

  .circleicon{ width: 17px;

      height: 17px;
      border: 1px solid #000;
      border-radius: 50%;
     // background-color: #0FF;
      opacity: 0.5; 

  } @keyframes fade {

   from {
       opacity: 1.0;
   }
   50% {
       opacity: 0.4;
   }
   to {
       opacity: 1.0;
   } }
  

  .roundblink {

   color: #fff;
   padding: 0px;
   font-size: 17px;
   height: 17px;
   animation: fade 600ms infinite; 
  

  }

  .roundgreen{ width: 17px; height: 17px; background-color:#27ae60; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }

导入第三方的图标库

免费成熟框架中导入使用了Fontawesome图标库，可以直接用样式类定义图标进行使用