图标能在视觉上简洁有效的指引用户操作。特殊情况下,使用图标能够代替文本。

何时使用图标?

同一个应用程序中的图标应该具有一致的外观及用户行为响应,应该将整个图标集作为用户界面中的重要部分。一般图标用于如下情况:

使用图标字体

在图标字体没有普及之前,图标通常是通过图片来展示,如今图标字体是展示图标的更好方式。使用图标字体能使用CSS对图标进行调整,例如定义大小、颜色及特殊效果。在ZUI中将使用图标字体作为系统图标集方案。采用开源web图标字体Font Awesome是一个不错的选择。

ZUI基于FontAwesome 4.3定制,去除了一些不常用的图标,并加入了一些适合中国使用的图标。

ZUI中的图标

在ZUI中提供了?个图标:

请稍后...

如何使用图标?

用法

使用一个单独的<span>标签或者<i>并增加对应的CSS类名即可,用来作为图标的标签不需要包含任何文本也不应该如此。

<i class="icon icon-star"></i>

注意要点

使用图标字体有一个特大好处就是图标就是文本字符,所有能用于文本的样式都可以用于图标,这样就可以随意定义图标的大小、颜色,甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式,包含如下内容:

不要将在任何控件标签上直接应用图标CSS类名,应该嵌套一个单独的<span>标签或者<i>标签。

预设的图标尺寸

正常大小
<i class="icon icon-star"></i>
.icon-2x
<i class="icon icon-star icon-2x"></i>
.icon-3x
<i class="icon icon-star icon-3x"></i>
.icon-4x
<i class="icon icon-star icon-4x"></i>
.icon-5x
<i class="icon icon-star icon-5x"></i>

旋转

不旋转
<i class="icon icon-flag"></i>
.icon-rotate-90
<i class="icon icon-flag icon-rotate-90"></i>
.icon-rotate-180
<i class="icon icon-flag icon-rotate-180"></i>
.icon-rotate-270
<i class="icon icon-flag icon-rotate-270"></i>
.icon-flip-horizontal
<i class="icon icon-flag icon-flip-horizontal"></i>
.icon-flip-vertical
<i class="icon icon-flag icon-flip-vertical"></i>
旋转动画

使用旋转动画方便制作用于加载指示的动画效果。

         
<i class="icon icon-spin icon-spinner-snake"></i>
<i class="icon icon-spin icon-spinner-indicator"></i>
<i class="icon icon-spin icon-circle-o-notch"></i>
<i class="icon icon-spin icon-cog"></i>
<i class="icon icon-spin icon-refresh"></i>
<i class="icon icon-spin icon-spinner"></i>