图标 Icon

使用字体图标，可以很方便地在任何位置放置矢量图形。本主题的字体图标由Font Awesome提供。

示例

基本形式

鼠标悬浮到图标上有提示。

动画

<p style="font-size: 20px;">
<i class="u-icon u-icon-spinner u-icon-spin"></i>
<i class="u-icon u-icon-circle-o-notch u-icon-spin"></i>
<i class="u-icon u-icon-refresh u-icon-spin"></i>
<i class="u-icon u-icon-cog u-icon-spin"></i>
<i class="u-icon u-icon-spinner u-icon-pulse"></i>
</p>

旋转和翻转

<p style="font-size: 20px;">
<i class="u-icon u-icon-shield"></i>
<i class="u-icon u-icon-shield u-icon-rotate-90"></i>
<i class="u-icon u-icon-shield u-icon-rotate-180"></i>
<i class="u-icon u-icon-shield u-icon-rotate-270"></i>
<i class="u-icon u-icon-shield u-icon-flip-horizontal"></i>
<i class="u-icon u-icon-shield u-icon-flip-vertical"></i>
</p>

重叠

<p style="font-size: 20px;">
<span class="u-iconstack">
  <i class="u-icon u-icon-square-o u-icon-2x"></i>
  <i class="u-icon u-icon-twitter u-icon-1x"></i>
</span>
<span class="u-iconstack">
  <i class="u-icon u-icon-circle u-icon-2x"></i>
  <i class="u-icon u-icon-flag u-icon-1x u-icon-inverse"></i>
</span>
<span class="u-iconstack">
  <i class="u-icon u-icon-square u-icon-2x"></i>
  <i class="u-icon u-icon-terminal u-icon-1x u-icon-inverse"></i>
</span>
<span class="u-iconstack">
  <i class="u-icon u-icon-camera u-icon-1x"></i>
  <i class="u-icon u-icon-ban u-icon-2x u-text u-text-error"></i>
</span>
</p>