Appearance

变换 ​

本教程是 Iconify SVG 框架教程 的一部分。

图标可以进行旋转，以及水平和/或垂直翻转。所有变换均相对于图标中心进行。

变换分为两种类型：

  • 水平翻转和垂直翻转。
  • 旋转 90、180 和 270 度。

CSS 与 Iconify 变换 ​

这些并非 CSS 变换，变换是在 SVG 内部进行的。

与 CSS 变换有什么区别？

  • 如果在 CSS 中将图标旋转 90 度，图标的边界框保持不变。16x24 的图标仍然占据 16x24 的空间，但可能会与周围的元素重叠。
  • 如果在 SVG 框架中将图标旋转 90 度，图标的尺寸会互换。16x24 的图标会变成 24x16 的图标，并且不会影响周围的元素。

示例：

Test icon with text around it

Test icon with text around it

使用 box-shadow 显示图标尺寸
html<p>
   Test icon
   <span
       class="iconify-inline"
       data-icon="fa-regular:handshake"
       data-rotate="90deg"
   ></span>
   with text around it
</p>
<p>
   Test icon
   <span
       class="iconify-inline"
       data-icon="fa-regular:handshake"
       style="transform: rotate(90deg);"
   ></span>
   with text around it
</p>

在上面的示例中，第一个图标使用 data-rotate 属性进行旋转，第二个图标使用 CSS 进行旋转。第一个图标保持了 1em 的高度，而第二个图标变得比预期更高。

有时你确实需要 CSS 变换所提供的行为。此时，你仍然可以通过将其添加到内联样式中来使用 CSS 变换。

翻转 ​

你可以水平或垂直翻转图标。

为此，请添加带有逗号分隔值的 data-flip 属性。可能的值包括：

  • "horizontal"：水平翻转图标。
  • "vertical"：垂直翻转图标。

示例：

No flip:

Horizontal flip:

Vertical flip:

Both (or 180° rotation):

html<p>
   No flip: <span class="iconify-inline" data-icon="bi:check2-circle"></span>
</p>
<p>
   Horizontal flip:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-flip="horizontal"
   ></span>
</p>
<p>
   Vertical flip:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-flip="vertical"
   ></span>
</p>
<p>
   Both (or 180° rotation):
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-flip="horizontal,vertical"
   ></span>
</p>

旋转 ​

你可以将图标旋转 90、180 和 270 度。

为此，请添加 data-rotate 属性。可能的值包括：

  • "90deg"、"1"：旋转 90 度。
  • "180deg"、"2"：旋转 180 度。
  • "270deg"、"3"：旋转 270 度。

示例：

No rotation:

90° rotation:

180° rotation:

270° rotation:

html<p>
   No rotation: <span class="iconify-inline" data-icon="bi:check2-circle"></span>
</p>
<p>
   90° rotation:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-rotate="90deg"
   ></span>
</p>
<p>
   180° rotation:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-rotate="180deg"
   ></span>
</p>
<p>
   270° rotation:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-rotate="270deg"
   ></span>
</p>

旋转与翻转 ​

你可以在图标上同时使用旋转和翻转。图标会先进行翻转，然后再进行旋转。