Semantic-UI 图标大小变化

Semantic-UI 是一个流行的 CSS 框架，可用于快速构建用户界面。其中一个功能是图标，本文将介绍如何在 Semantic-UI 中更改图标的大小。

使用 size 属性

Semantic-UI 的图标可以使用 size 属性来设置大小。可以使用以下值：

• mini
• tiny
• small
• large
• big
• huge
• massive

以下是示例代码，将图标设置为 large 大小：

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

使用 CSS

除了使用 size 属性，还可以使用 CSS 来更改图标的大小。例如，将图标放在 div 元素内，然后为该 div 元素设置 font-size：

<div style="font-size: 4em;">
<i class="heart icon"></i>
</div>

自定义大小

如果希望使用自定义大小，可以创建一个 CSS 类并将其应用于图标。例如，以下代码添加了一个名为 my-icon 的 CSS 类，并设置其 font-size 为 3rem：

<style>
.my-icon {
  font-size: 3rem;
}
</style>
<i class="my-icon heart icon"></i>

总结

通过使用 size 属性和 CSS，可以轻松地更改 Semantic-UI 图标的大小。如果需要更大或更小的大小，还可以创建自定义 CSS 类。