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

何时使用图标?

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

使用图标字体

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

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

ZUI中的图标

在ZUI中提供了?个图标:

请稍后...

如何使用图标?

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

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

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

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