Semantic-UI 按钮图标类型介绍

Semantic-UI 是一个人气较高的前端框架，其中的按钮图标类型有很多，下面一一介绍。

基础图标类型

<button class="ui button">
  <i class="icon home"></i>
  Home
</button>

在按钮内部使用 <i> 标签嵌套一个图标类，例如 class="icon home"，其中 home 表示使用 Semantic-UI 内置的图标。

工具提示图标类型

<button class="ui icon button" data-tooltip="Tooltip Text">
  <i class="cloud icon"></i>
</button>

在按钮外只嵌套一个 <i> 标签来显示图标，而 button 的 class 为 ui icon button，data-tooltip 为属性添加一个工具提示。

标签图标类型

<a class="ui tag label">
  <i class="icon delete"></i>
  Tag
</a>

这个类型的按钮使用 <a> 标签，class 添加了 ui tag label，并且内部也嵌套了一个 <i> 标签来显示图标。

图标与文本组合图标类型

<button class="ui labeled icon button">
  <i class="pause icon"></i>
  Pause
</button>

这个类型的按钮内部使用 <i> 标签来显示图标，并且使用 class="ui labeled icon button" 来同时添加文本和图标。

倒三角形图标类型

<button class="ui icon button">
  <i class="dropdown icon"></i>
</button>

这个类型的按钮只有一个图标，使用 dropdown 类来表示倒三角形。

圆形图标类型

<button class="ui circular icon button">
  <i class="icon user"></i>
</button>

这个类型的按钮使用 circular 类来表示为圆形。

以上就是 Semantic-UI 按钮图标类型的介绍，可以根据需要灵活使用。