语义UI | 图标

简介

语义UI是一个基于CSS的前端框架，旨在提供简单、现代和语义的UI组件。语义UI有着完整的公共库和主题，能让你快速构建美观且高效的Web应用。本文介绍语义UI的图标组件。

图标

语义UI提供了大量的图标，包括了品牌、行动、状态、物品等多个类别。为了提高可访问性，语义UI在图标上将 aria-hidden 属性设置为 true，并且通过 .sr-only 类将文本内容屏蔽，这样，在屏幕阅读器中就不会被读出来。

基本图标

可以使用以下代码来添加一个基本图标：

<i class="icon heart"></i>

这里我们添加了一个心形图标。除了 heart 以外，语义UI还提供了很多其他基本图标，比如 envelope、mail、phone、star、play、plus 等等。更多的基本图标请查看官方文档。

品牌图标

语义UI提供了许多品牌图标，比如 facebook、twitter、google、linkedin、youtube 等等。

<i class="facebook icon"></i>

使用上述代码可以添加 Facebook 的图标。语义UI还提供了更多的品牌图标，请查看官方文档。

自定义图标

如果你需要使用自定义图标，可以按照下面的方式添加：

<i class="icon">
  <svg class="svg-inline--fa fa-user fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm96 32h-32c-35.3 0-64 28.7-64 64v32c0 13.3 10.7 24 24 24h112c13.3 0 24-10.7 24-24v-32c0-35.3-28.7-64-64-64z"></path></svg>
</i>

这里我们使用了 Font Awesome 的 user 图标。

总结

语义UI提供了丰富的图标，便于开发人员快速开发美观的Web应用。同时，通过对图标的语义化处理，提高了Web应用的可访问性。