☍图标typo/icon

提供各类小图标。

基本用法

通过 class 指定图标

加载图标

图标列表

☍基本用法

创建一个独立的 <i class="x-icon"> 标签来表示图标，标签内部字符决定了图标的内容。

❐<i class="x-icon">★</i> 你好　　
<a href="###"><i class="x-icon">★</i>你好</a>

注意

不要在已有的标签直接添加 .x-icon 来显示图标。

使用图标时应在图标后追加一个空格以保证美观。 链接内图标不需要追加空格，因为其已包含了 0.25rem 右边距，这可以避免图标右边空格出现下划线影响视觉效果。

☍通过 class 指定图标

引入 typo/icon/icon-class.scss 后可以通过 class 来指定图标。

❐<i class="x-icon x-icon-star"></i> 你好　
<a href="###"><i class="x-icon x-icon-star"></i>你好</a>

☍加载图标

结合旋转，可以完成加载中的效果。

❐<i class="x-icon x-spin">&#1161;</i> 正在加载...　　
<i class="x-icon x-spin">🗘</i> 正在刷新...

☍图标列表

图标的内容由内部文字决定，更换 <i> 里面的字符可以切换图标的内容。 一些特殊字符可以使用 HTML 转义码（如★）表示。