图标

将可缩放矢量图标放置在内容中的任何位置。

UIkit 带有自己的 SVG 图标系统和一个全面的库，其中包含越来越多的优雅的轮廓图标。该组件将 SVG 注入网站，以便它们采用颜色，并且可以使用 CSS 进行样式设置。

用法

确保包含图标库脚本，有关更多详细信息，请参阅安装说明。

<script src="uikit/dist/js/uikit-icons.min.js"></script>

要应用此组件，请将 uk-icon 属性添加到 <span> 或 <a> 元素。要显示实际图标，您需要将 icon: NAME 参数追加到属性中。瞧，您就拥有了一个继承颜色（与文本相同）的矢量图标。

<span uk-icon="icon: check"></span>

<a href="" uk-icon="icon: heart"></a>

如果 icon 是属性值中唯一的选项，您也可以使用 uk-icon="NAME"

<span uk-icon="heart"></span>

<span class="uk-margin-small-right" uk-icon="check"></span>

<a href="" uk-icon="heart"></a>

库

以下是目前所有可用图标的概述。随着时间的推移，我们将不断向列表中添加新图标。

应用程序

主页
登录
注销
用户
用户
锁定
解锁
设置
齿轮
螺母
评论
评论中
评论
主题标签
标签
购物车
包
信用卡
邮件
接收器
打印
搜索
位置
书签
代码

油漆桶
相机
摄像机
铃铛
麦克风
闪电
星星
心
开心
救生圈
RSS
社交
Git 分支
Git 分叉
世界
日历
时钟
历史
未来
十字线
铅笔
垃圾桶
移动
链接
外部链接

眼睛
隐藏
问题
信息
警告
图片
缩略图
表格
列表
菜单
网格
更多
更多（垂直）
加号
加号圆圈
减号
减号圆圈
关闭
勾号
禁止
刷新
播放
播放圆圈

设备

电视
台式机
笔记本电脑

平板电脑
手机

横屏平板电脑
横屏手机

存储

文件
文本文件
PDF 文件
复制
编辑文件

文件夹
相册
推送
拉取
服务器

数据库
云上传
云下载
下载
上传

方向

回复
转发
展开
收缩
向右上角箭头
向上箭头
向下箭头

向左箭头
向右箭头
向上箭头
向下箭头
向左箭头
向右箭头

向左双箭头
向右双箭头
向上三角形
向下三角形
向左三角形
向右三角形

编辑器

粗体
斜体

删除线

右引号

品牌

500px
Android
Android 机器人
苹果
Behance
蓝天
Discord
Dribbble
Etsy
Facebook
Flickr
Foursquare
GitHub
GitHub（备用）

Gitter
谷歌
Instagram
Joomla
LinkedIn
Mastodon
微软
Pinterest
Reddit
Signal
Soundcloud
Telegram
Threads

TikTok
Tripadvisor
Tumblr
Twitch
UIkit
Vimeo
whatsapp
wordpress
x
xing
yelp
yootheme
youtube

比例

在uk-icon 属性中添加ratio: 2参数可以将图标大小翻倍，或者根据您想要的大小添加任何其他数字。

<span uk-icon="icon: check; ratio: 2"></span>

<span class="uk-margin-small-right" uk-icon="icon: check; ratio: 2"></span>
<span uk-icon="icon: check; ratio: 3.5"></span>

链接修饰符

要将默认链接样式重置为更柔和的颜色（在锚点内使用图标时），请添加.uk-icon-link 类。

<a href="" class="uk-icon-link" uk-icon="heart"></a>

<div>
    <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="copy"></a>
    <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="file-edit"></a>
    <a href="#" class="uk-icon-link" uk-icon="trash"></a>
</div>

按钮修饰符

在<a> 元素上使用修饰符.uk-icon-button 类来创建一个图标按钮，它可以用于社交图标。

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

<div>
    <a href="" class="uk-icon-button uk-margin-small-right" uk-icon="instagram"></a>
    <a href="" class="uk-icon-button  uk-margin-small-right" uk-icon="facebook"></a>
    <a href="" class="uk-icon-button" uk-icon="youtube"></a>
</div>

图像修饰符

您还可以使任何背景图像按图标的大小缩放。只需添加.uk-icon-image 类和背景图像路径。

<span class="uk-icon uk-icon-image" style="background-image: url(images/dark.jpg);"></span>

组件选项

这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多

选项	值	默认值	描述
`icon`	字符串		要显示的图标。
`ratio`	数字	`1`	图标大小比例。

icon 是主要选项，如果它是在属性值中唯一的选项，则可以省略它的键。

<span uk-icon="heart"></span>

JavaScript

了解更多关于 JavaScript 组件.

初始化

UIkit.icon(element, options);

属性

svg

一个 JavaScript Promise，它将解析为添加的 SVG 节点。

UIkit.icon(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })

可访问性

将适当的 WAI-ARIA 角色、状态和属性设置为图标组件。

如果使用了<a> 元素，请将aria-label 属性设置为<a> 元素，以描述它的含义。

<a href="" uk-icon="icon: heart" aria-label="…"></a>

文档

图标

应用程序

设备

存储

方向

编辑器

品牌