Semantic-UI 图标标题内容

Semantic-UI 是一款现代化的网页UI库，其提供了大量的图标选项来增强网页的视觉效果。除了基本的图标，Semantic-UI 还提供了可以与标题一起使用的图标。

使用方法

要在标题中使用图标，在标题标签中添加icon类即可。例如，以下代码会在标题前添加一个 home 图标：

<h1 class="ui icon header">
  <i class="home icon"></i>
  <div class="content">
    Semantic-UI
    <div class="sub header">Modern front-end development framework</div>
  </div>
</h1>

图标列表

以下是 Semantic-UI 支持的一些常用图标及其类名：

| 图标名称 | 类名 | |----------|------| | 左箭头 | left arrow | | 右箭头 | right arrow | | 下箭头 | down arrow | | 上箭头 | up arrow | | 转圈箭头 | circular arrow | | 云 | cloud | | 垃圾桶 | trash alternate | | 笔和纸 | edit | | 打钩勾 | checkmark | | 卡片 | card | | 菜单 | list | | 筛选器 | filter |

除了以上图标，还有很多其他的图标可供选择。可以参考 Semantic-UI 官方文档。

自定义图标

如果想使用自定义图标，可以先将自定义的图标文件放置在项目中，然后在 CSS 中添加代码来定义新的图标类：

@font-face {
  font-family: 'MyCustomIcons';
  src: url('path/to/my-custom-icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.ui.icon.header .my-custom-icon:before {
  font-family: 'MyCustomIcons';
  content: "\e000";
}

其中，path/to/my-custom-icons.ttf 是自定义图标的路径。

添加 my-custom-icon 类到想要添加自定义图标的元素即可。

结论

在 Semantic-UI 中使用图标可以为网页增添更多的视觉效果，并且可以让各种元素在风格上更加统一。通过本文所介绍的方法，可以轻松地在标题中添加图标，同时也可以使用自定义的图标来满足个性化的需求。