# 图标
使用图标字体,在任何地方放置矢量图标。
这个组件使用了由Dave Gandy发起的 [Font Awesome](http://fortawesome.github.com/Font-Awesome/) 图标字体。Font Awesome为web相关行为提供了超过300个标志和符号。 由于允许你通过CSS简单地改变颜色、尺寸和其他样式,图标字体是很棒的选择。它们是可伸缩的矢量图形,这意味着它们在高分辨率设备上也能很好地显示。
* * *
## 用法
应用此组件,在任何 `<i>` 或 `<span>` 元素中添加 `.uk-icon-*` 类即可。瞧,你有了一个矢量图标,它能像文本一样继承了尺寸和色彩。
### 示例
![](https://box.kancloud.cn/2016-05-12_57346f31f3204.jpg)
### 标签
```
<!-- 图标 -->
<i class="uk-icon-cog"></i>
<!-- 链接中的图标 -->
<a href=""><i class="uk-icon-cog"></i> ...</a>
```
* * *
## 更多示例
### 按钮组
这个示例展示了每个按钮都带有图标的按钮租,来自 [按钮组件](button.html) 。
#### 示例
![](https://box.kancloud.cn/2016-05-12_57346f32130d0.jpg)
* * *
### 按钮下拉菜单
这个示例展示了一个被分割成左边是正常按钮右边是下拉菜单切换按钮的按钮,来自[下拉菜单组件](dropdown.html)。
#### 示例
![](https://box.kancloud.cn/2016-05-12_57346f3224d6f.jpg)
* * *
### 块引用
这个示例展示[基础组件](base.html) 中个块引用,它使用了一个大引号图标,还使用了[效果组件](utility.html)中的`.uk-align-left`类。
#### 示例
![](https://box.kancloud.cn/2016-05-12_57346f3234bee.jpg)
* * *
## 尺寸
添加`.uk-icon-small`,`.uk-icon-medium`或`.uk-icon-large`类使一个图标更大。
![](https://box.kancloud.cn/2016-05-12_57346f3248d36.jpg)
* * *
## 旋转
添加`.uk-icon-spin`创建动画的旋转图标。Add the `.uk-icon-spin` class to create animated spinning icons.
![](https://box.kancloud.cn/2016-05-12_57346f325aeaf.jpg)
* * *
## 图标的 hover 效果
使用 `.uk-icon-hover` 修饰器将锚文本做成图标效果,它添加了hover效果并溢出了链接下划线。
### Example
![](https://box.kancloud.cn/2016-05-12_57346f326ac49.jpg)
### Markup
```
<a href="" class="uk-icon-hover uk-icon-github"></a>
```
## 图标按钮
使用修饰类`.uk-icon-button`创建一个图标按钮,可以完美地用于社交图标。
### 示例
![](https://box.kancloud.cn/2016-05-12_57346f327ae8f.jpg)
### 标签
```
<a href="" class="uk-icon-button uk-icon-github"></a>
```
* * *
## 调整图标
为图标添加固定的宽度,并将其居中,只需添加 `.uk-icon-justify` 类名。在一个列表中使用不同的图标时是很有帮助的哦。
### Example
![](https://box.kancloud.cn/2016-05-12_57346f328a44d.jpg)
### Markup
```
<a href="" class="uk-icon-justify uk-icon-github"></a>
```
* * *
## 图标总览
这是所有一个所有可用的`.uk-icon-*` 类的总览,由[Font Awesome](http://fortawesome.github.com/Font-Awesome/)提供。
### Web 应用程序图标
![](https://box.kancloud.cn/2016-05-12_57346f329deca.jpg)
![](https://box.kancloud.cn/2016-05-12_57346f32cb1f1.jpg)
* * *
### 交通工具图标
![](https://box.kancloud.cn/2016-05-12_57346f32f1289.jpg)
* * *
### 手势图标
![](https://box.kancloud.cn/2016-05-12_57346f330ea70.jpg)
* * *
### 性别图标
![](https://box.kancloud.cn/2016-05-12_57346f332453a.jpg)
* * *
### 文件类型图标
![](https://box.kancloud.cn/2016-05-12_57346f333406d.jpg)
* * *
### 旋转图标
![](https://box.kancloud.cn/2016-05-12_57346f33454c4.jpg)
* * *
### 表单控件图标
![](https://box.kancloud.cn/2016-05-12_57346f3354ba0.jpg)
* * *
### 支付工具图标
![](https://box.kancloud.cn/2016-05-12_57346f33666aa.jpg)
* * *
### 货币
![](img/icons-cur.jpg)
* * *
### 文本编辑器
![](https://box.kancloud.cn/2016-05-12_57346f337a478.jpg)
* * *
### 方向
![](https://box.kancloud.cn/2016-05-12_57346f338d3a2.jpg)
* * *
### 视频播放器
![](https://box.kancloud.cn/2016-05-12_57346f33a7014.jpg)
* * *
### 品牌图标
![](https://box.kancloud.cn/2016-05-12_57346f33b84db.jpg)
* * *
### 医疗类图标
![](https://box.kancloud.cn/2016-05-12_57346f33e4432.jpg)
- UIkit 中文文档
- 开始使用
- 初学者
- 开始使用
- 如何自定义
- 布局示例
- 开发者
- 项目结构
- Less & Sass 文件
- 创建主题
- 创建样式
- Customizer.json
- JavaScript
- 自定义前缀
- 核心组件
- 默认
- 基础
- 打印
- 布局类组件
- 网格
- 面板/Panel
- 块/Block
- 文章
- 评论/Comment
- 效果/Utility
- Flex 布局
- 覆盖/Cover
- 导航类组件
- 导航菜单
- 导航栏
- 二级导航
- 面包屑/Breadcrumb
- 分页
- 选项卡
- 缩略图导航/Thumbnav
- 页面元素
- 列表
- 描述列表
- 表格
- 表单
- 常用组件
- 按钮
- 图标
- 关闭/Close
- 徽章/Badge
- 提示框
- 缩略图/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 动画
- 对比度/Contrast
- JAVASCRIPT组件
- 下拉菜单
- 模态对话框
- 抽屉/Off-canvas
- 切换器/Switcher
- 拨动/toggle
- 滚动监听/Scrollspy
- 平滑滚动
- 附加组件
- 布局类组件
- 动态网格
- 视差网格
- 导航类组件
- 圆点导航
- 滑动导航/Slidenav
- 动态分页
- 常用组件
- 高级表单
- 文件表单/Form file
- 密码表单
- 选择表单
- 占位符
- 进度条/Progress
- JAVASCRIPT组件
- 灯箱/Lightbox
- 自动完成/Autocomplete
- 日期选择器/Datepicker
- HTML 编辑器
- 滚动条/Slider
- 滑块集/Slideset
- 幻灯片/Slideshow
- 视差/Parallax
- 手风琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附着/Sticky
- 时间选择器
- 工具提示/Tooltip
- 上传