zui

section: control id: icon description: 使用和查找图标 icon: icon-star filter: tubiao tb --- # 图标 <style> #iconsExample ul {padding: 0;} #iconsExample li { cursor: pointer; float: left; width: 150px; line-height: 25px; list-style: none; padding: 2px 10px; white-space: nowrap; transition: all .3s; } #iconsExample li a {color: #333} #iconsExample li a:hover {text-decoration: none} #iconsExample li a > i {display: inline-block; min-width: 20px} #iconsExample li:hover {background-color: #d5f1d7; transform: scale(1.2);} .table-icons-example td {vertical-align: middle;} .table-icons-example td pre {margin-bottom: 0;} </style> 图标能在视觉上简洁有效的指引用户操作。特殊情况下，使用图标能够代替文本。 ## 何时使用图标？同一个应用程序中的图标应该具有一致的外观及用户行为响应，应该将整个图标集作为用户界面中的重要部分。一般图标用于如下情况： * 用于应用程序头部，便于用户识别正在使用的应用； * 用于按钮，对于一些常用的按钮可以使用图标取代按钮中的文本，使得界面更加简洁； * 用于提示消息，图标能指明消息类型，便于用户无需仔细阅读消息内容就可以迅速做出决策； * 用于一些简单但重要列表，在列表项目前面加上合适的图标能大大增强列表识别程度； * 等同与标签，图标能简明表达项目或信息类型。 ## 使用图标字体在图标字体没有普及之前，图标通常是通过图片来展示，如今图标字体是展示图标的更好方式。使用图标字体能使用CSS对图标进行调整，例如定义大小、颜色及特殊效果。在ZUI中将使用图标字体作为系统图标集方案。采用开源web图标字体[Font Awesome](http://fortawesome.github.io/Font-Awesome/)是一个不错的选择。 ZUI基于FontAwesome 4.3定制，去除了一些不常用的图标，并加入了一些适合中国使用的图标。 ## ZUI中的图标在ZUI中提供了<span class="icons-count">?</span>个图标： <div class="example" id="iconsExample"> <div class="text-center text-muted"><i class="icon icon-spin icon-spinner-indicator"></i> 请稍后...</div> </div> ## 如何使用图标？ ### 用法使用一个单独的`<span>`标签或者`<i>`并增加对应的CSS类名即可，用来作为图标的标签不需要包含任何文本也不应该如此。 ```html <i class="icon icon-star"></i> ``` ### 注意要点使用图标字体有一个好处就是图标就是文本字符，所有能用于文本的样式都可以用于图标，这样就可以随意定义图标的大小、颜色，甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式，包含如下内容： * 图标应具备统一的颜色，如果有交互行为样式也应该保持一致； * 图标的大小应该保持一致，正文中的图标大小应为14px，标题中的图标可以为28px； * 图标应与所指示的内容对应，不同地方的同一个指示内容应该使用同一个图标。 <div class="alert alert-danger"> <p> 不要将在任何控件标签上直接应用图标CSS类名，应该嵌套一个单独的<code><span></code>标签或者<code><i></code>标签。</p> </div> ### 等宽图标通常情况下 `.icon-*` 不需要和 `.icon` 类一起使用，但由于不同的图标外形不同，其在文字行中所占据的宽度也不同，如果需要使图标的宽度一致，则需要为 `.icon-*` 添加 `.icon` 类，这样就得到等宽图标。等宽图标对于在一个列表中用于垂直对其图标非常有必要。 <example> <div class="row"> <div class="col-sm-6"> <ul style="margin: 0"> <li><i class="icon-flag"></i> 普通图标</li> <li><i class="icon-heart"></i> <span class="code">icon-heart</span></li> <li><i class="icon-resize-v"></i> <span class="code">icon-resize-v</span></li> <li><i class="icon-film"></i> <span class="code">icon-film</span></li> </ul> </div> <div class="col-sm-6"> <ul style="margin: 0"> <li><i class="icon icon-flag"></i> 等宽图标</li> <li><i class="icon icon-heart"></i> <span class="code">icon icon-heart</span></li> <li><i class="icon icon-resize-v"></i> <span class="code">icon icon-resize-v</span></li> <li><i class="icon icon-film"></i> <span class="code">icon icon-film</span></li> </ul> </div> </div> </example> ```html <ul> <li><i class="icon-flag"></i> 普通图标</li> <li><i class="icon-heart"></i> icon-heart</li> <li><i class="icon-resize-v"></i> icon-resize-v</li> <li><i class="icon-film"></i> icon-film</li> </ul> <ul> <li><i class="icon icon-flag"></i> 等宽图标</li> <li><i class="icon icon-heart"></i> icon icon-heart</li> <li><i class="icon icon-resize-v"></i> icon icon-resize-v</li> <li><i class="icon icon-film"></i> icon icon-film</li> </ul> ``` ### 预设的图标尺寸 <div class="example"> <table class="table table-icons-example"> <tbody><tr> <td>正常大小</td> <td><i class="icon icon-star"></i></td> <td><pre><code><i class="icon icon-star"></i></code></pre></td> </tr> <tr> <td><code>.icon-2x</code></td> <td><i class="icon icon-star icon-2x"></i></td> <td><pre><code><i class="icon icon-star <em>icon-2x</em>"></i></code></pre></td> </tr> <tr> <td><code>.icon-3x</code></td> <td><i class="icon icon-star icon-3x"></i></td> <td><pre><code><i class="icon icon-star <em>icon-3x</em>"></i></code></pre></td> </tr> <tr> <td><code>.icon-4x</code></td> <td><i class="icon icon-star icon-4x"></i></td> <td><pre><code><i class="icon icon-star <em>icon-4x</em>"></i></code></pre></td> </tr> <tr> <td><code>.icon-5x</code></td> <td><i class="icon icon-star icon-5x"></i></td> <td><pre><code><i class="icon icon-star <em>icon-5x</em>"></i></code></pre></td> </tr> </tbody></table> </div> ### 旋转 <div class="example"> <table class="table table-icons-example"> <tbody><tr> <td>不旋转</td> <td><i class="icon icon-2x icon-flag"></i></td> <td><pre><code><i class="icon icon-flag"></i></code></pre></td> </tr> <tr> <td><code>.icon-rotate-90</code></td> <td><i class="icon icon-2x icon-flag icon-rotate-90"></i></td> <td><pre><code><i class="icon icon-flag <em>icon-rotate-90</em>"></i></code></pre></td> </tr> <tr> <td><code>.icon-rotate-180</code></td> <td><i class="icon icon-2x icon-flag icon-rotate-180"></i></td> <td><pre><code><i class="icon icon-flag <em>icon-rotate-180</em>"></i></code></pre></td> </tr> <tr> <td><code>.icon-rotate-270</code></td> <td><i class="icon icon-2x icon-flag icon-rotate-270"></i></td> <td><pre><code><i class="icon icon-flag <em>icon-rotate-270</em>"></i></code></pre></td> </tr> <tr> <td><code>.icon-flip-horizontal</code></td> <td><i class="icon icon-2x icon-flag icon-flip-horizontal"></i></td> <td><pre><code><i class="icon icon-flag <em>icon-flip-horizontal</em>"></i></code></pre></td> </tr> <tr> <td><code>.icon-flip-vertical</code></td> <td><i class="icon icon-2x icon-flag icon-flip-vertical"></i></td> <td><pre><code><i class="icon icon-flag <em>icon-flip-vertical</em>"></i></code></pre></td> </tr> </tbody></table> </div> #### 旋转动画使用旋转动画方便制作用于加载指示的动画效果。 <div class="example"> <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> </div> ```html <i class="icon icon-spin icon-spinner-snake"></i> ``` ```html <i class="icon icon-spin icon-spinner-indicator"></i> ``` ```html <i class="icon icon-spin icon-circle-o-notch"></i> ``` ```html <i class="icon icon-spin icon-cog"></i> ``` ```html <i class="icon icon-spin icon-refresh"></i> ``` ```html <i class="icon icon-spin icon-spinner"></i> ``` <script> function afterPageLoad() { if($.doc) { var url = $('body').hasClass('layout-page') ? '../icons.json' : 'docs/icons.json'; $.doc.loadData(url, function(data) { var iconCount = 0; var $list = $('<ul class="clearfix"></ul>'); $.each(data, function(name, icon) { iconCount++; var $li = $('<li><a href="#search/icon-' + name + '"><i class="icon-' + name + '"></i> ' + name + '</a></li>'); icon.id = name; $li.data('icon', icon); $list.append($li); }); $('#iconsExample').empty().append($list); $('#pageBody .icons-count').text(iconCount); }); } } </script>