图标
最后更新于:2022-04-01 22:22:05
# 图标
使用图标字体,在任何地方放置矢量图标。
这个组件使用了由Dave Gandy发起的 [Font Awesome](http://fortawesome.github.com/Font-Awesome/) 图标字体。Font Awesome为web相关行为提供了超过300个标志和符号。 由于允许你通过CSS简单地改变颜色、尺寸和其他样式,图标字体是很棒的选择。它们是可伸缩的矢量图形,这意味着它们在高分辨率设备上也能很好地显示。
* * *
## 用法
应用此组件,在任何 `<i>` 或 `<span>` 元素中添加 `.uk-icon-*` 类即可。瞧,你有了一个矢量图标,它能像文本一样继承了尺寸和色彩。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f31f3204.jpg)
### 标签
```
...
```
* * *
## 更多示例
### 按钮组
这个示例展示了每个按钮都带有图标的按钮租,来自 [按钮组件](button.html) 。
#### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f32130d0.jpg)
* * *
### 按钮下拉菜单
这个示例展示了一个被分割成左边是正常按钮右边是下拉菜单切换按钮的按钮,来自[下拉菜单组件](dropdown.html)。
#### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3224d6f.jpg)
* * *
### 块引用
这个示例展示[基础组件](base.html) 中个块引用,它使用了一个大引号图标,还使用了[效果组件](utility.html)中的`.uk-align-left`类。
#### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3234bee.jpg)
* * *
## 尺寸
添加`.uk-icon-small`,`.uk-icon-medium`或`.uk-icon-large`类使一个图标更大。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3248d36.jpg)
* * *
## 旋转
添加`.uk-icon-spin`创建动画的旋转图标。Add the `.uk-icon-spin` class to create animated spinning icons.
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f325aeaf.jpg)
* * *
## 图标的 hover 效果
使用 `.uk-icon-hover` 修饰器将锚文本做成图标效果,它添加了hover效果并溢出了链接下划线。
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f326ac49.jpg)
### Markup
```
```
## 图标按钮
使用修饰类`.uk-icon-button`创建一个图标按钮,可以完美地用于社交图标。
### 示例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f327ae8f.jpg)
### 标签
```
```
* * *
## 调整图标
为图标添加固定的宽度,并将其居中,只需添加 `.uk-icon-justify` 类名。在一个列表中使用不同的图标时是很有帮助的哦。
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f328a44d.jpg)
### Markup
```
```
* * *
## 图标总览
这是所有一个所有可用的`.uk-icon-*` 类的总览,由[Font Awesome](http://fortawesome.github.com/Font-Awesome/)提供。
### Web 应用程序图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f329deca.jpg)
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f32cb1f1.jpg)
* * *
### 交通工具图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f32f1289.jpg)
* * *
### 手势图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f330ea70.jpg)
* * *
### 性别图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f332453a.jpg)
* * *
### 文件类型图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f333406d.jpg)
* * *
### 旋转图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f33454c4.jpg)
* * *
### 表单控件图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3354ba0.jpg)
* * *
### 支付工具图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f33666aa.jpg)
* * *
### 货币
![](img/icons-cur.jpg)
* * *
### 文本编辑器
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f337a478.jpg)
* * *
### 方向
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f338d3a2.jpg)
* * *
### 视频播放器
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f33a7014.jpg)
* * *
### 品牌图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f33b84db.jpg)
* * *
### 医疗类图标
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f33e4432.jpg)
';