图标库（Font Awesome 6）

Winter包括Font Awesome 6 免费 默认图标设置，允许人们在后端或 CMS 中使用超过 1,500 个免费设计图标和近 500 个品牌图标。我们还包括与旧插件和主题的 Font Awesome 4 类的兼容性。

有关 Font Awesome 库的更多信息，或搜索可用图标，请访问字体真棒网站.

#浏览图标

您可以通过以下 URL 浏览 Font Awesome 网站上的可用图标： https://fontawesome.com/search?m=free

请注意，我们仅包含免费图标和品牌。

#使用图标

您可以通过放置内联标签（例如<i> 或者<span> 标签）并将类设置为您希望使用的图标：

<i class="icon-camera-retro"></i> icon-camera-retro

<span class="icon-flag-checkered"></span> wn-icon-flag-checkered

使用wn- prefix 将允许您使用图标为给定标签内的内容添加前缀：

<i class="wn-icon-star">You're a star!</i>

<strong class="wn-icon-snowflake">Winter is coming.</strong>

您也可以选择使用标准的 Font Awesome 类：

<i class="fas fa-star">You're a star!</i>

<strong class="fas fa-snowflake">Winter is coming.</strong>

#图标样式

与 Font Awesome 6 一样，Winter 也包括三种样式的图标：纯色、常规和品牌。默认情况下，Winter 中的图标使用 solid 样式，该样式具有完整的免费图标集。

要使用不太明显但可用图标少得多的常规样式图标，您可以包括icon-regular 与您的图标类一起上课。对于品牌，您可以包括icon-brand 班级。

<i class="icon-star"></i> Solid

<i class="icon-regular icon-star"></i> Regular

我们还提供对 Font Awesome 样式类的支持：fas 对于固体，far 对于定期和fab 为品牌。

#图标大小

Winter 支持多个尺寸等级来控制图标的尺寸。

您可以将图标的大小调整为常规图标大小的 1-10 倍。

<i class="icon-camera-retro icon-10x"></i> icon-10x
<i class="icon-camera-retro icon-9x"></i> icon-9x
<i class="icon-camera-retro icon-8x"></i> icon-8x
<i class="icon-camera-retro icon-7x"></i> icon-7x
<i class="icon-camera-retro icon-6x"></i> icon-6x
<i class="icon-camera-retro icon-5x"></i> icon-5x
<i class="icon-camera-retro icon-4x"></i> icon-4x
<i class="icon-camera-retro icon-3x"></i> icon-3x
<i class="icon-camera-retro icon-2x"></i> icon-2x
<i class="icon-camera-retro icon-1x"></i> icon-1x

我们还提供了更多的类来匹配 CSS 框架中的常见大小前缀，例如sm,lg， ETC。

<i class="icon-camera-retro icon-2xs"></i> icon-2xs
<i class="icon-camera-retro icon-xs"></i> icon-xs
<i class="icon-camera-retro icon-sm"></i> icon-sm
<i class="icon-camera-retro icon-lg"></i> icon-lg
<i class="icon-camera-retro icon-xl"></i> icon-xl
<i class="icon-camera-retro icon-2xl"></i> icon-2xl

#图标列表项

您可以将图标应用于列表，允许您使用图标作为列表项前缀而不是标准圆圈。

你必须包括icon-ul 上课<ul> 标记，然后是icon-li 给所有人上课<li> 内的项目以利用此功能。

<ul class="icon-ul">
    <li class="icon-li icon-battery-0">Empty</li>
    <li class="icon-li icon-battery">Low</li>
    <li class="icon-li icon-battery-half">Charging</li>
    <li class="icon-li icon-battery-full">Full</li>
</ul>

#图标按钮

随意将它们与按钮一起使用。

<a class="btn btn-default wn-icon-refresh" href="#">
    Refresh
</a>
<a class="btn btn-success wn-icon-shopping" href="#">
    Checkout
</a>
<a class="btn btn-primary wn-icon-comment" href="#">
    Comment
</a>
<a class="btn btn-danger wn-icon-trash" href="#">
    Delete
</a>
<a class="btn btn-default wn-icon-cog" href="#">
    Settings
</a>
<a class="btn btn-info wn-icon-info" href="#">
    More Info
</a>