图标

使用图标字体，在任何地方放置矢量图标。

这个组件使用了由Dave Gandy发起的 Font Awesome 图标字体。Font Awesome为web相关行为提供了超过300个标志和符号。 由于允许你通过CSS简单地改变颜色、尺寸和其他样式，图标字体是很棒的选择。它们是可伸缩的矢量图形，这意味着它们在高分辨率设备上也能很好地显示。

用法

应用此组件，在任何 <i> 或 <span> 元素中添加 .uk-icon-* 类即可。瞧，你有了一个矢量图标，它能像文本一样继承了尺寸和色彩。

示例

标签

<!-- 图标 -->
<i class="uk-icon-cog"></i>

<!-- 链接中的图标 -->
<a href=""><i class="uk-icon-cog"></i> ...</a>

更多示例

按钮组

这个示例展示了每个按钮都带有图标的按钮租，来自 按钮组件 。

示例

按钮下拉菜单

这个示例展示了一个被分割成左边是正常按钮右边是下拉菜单切换按钮的按钮，来自下拉菜单组件。

示例

块引用

这个示例展示基础组件 中个块引用，它使用了一个大引号图标，还使用了效果组件中的.uk-align-left类。

示例

尺寸

添加.uk-icon-small，.uk-icon-medium或.uk-icon-large类使一个图标更大。

旋转

添加.uk-icon-spin创建动画的旋转图标。Add the .uk-icon-spin class to create animated spinning icons.

图标的 hover 效果

使用 .uk-icon-hover 修饰器将锚文本做成图标效果，它添加了hover效果并溢出了链接下划线。

Example

Markup

<a href="" class="uk-icon-hover uk-icon-github"></a>

图标按钮

使用修饰类.uk-icon-button创建一个图标按钮，可以完美地用于社交图标。

示例

标签

<a href="" class="uk-icon-button uk-icon-github"></a>

调整图标

为图标添加固定的宽度，并将其居中，只需添加 .uk-icon-justify 类名。在一个列表中使用不同的图标时是很有帮助的哦。

Example

Markup

<a href="" class="uk-icon-justify uk-icon-github"></a>

图标总览

这是所有一个所有可用的.uk-icon-* 类的总览，由Font Awesome提供。

Web 应用程序图标

交通工具图标

手势图标

性别图标

文件类型图标

旋转图标

表单控件图标

支付工具图标

货币

文本编辑器

方向

视频播放器

品牌图标

医疗类图标