图标

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

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 文件
复制
编辑文件

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

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

方向

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

向下箭头
向左箭头
向右箭头
向上箭头（V字形）
向下箭头（V字形）
向左箭头（V字形）
向右箭头（V字形）

向左双箭头（V字形）
向右双箭头（V字形）
向上三角形
向下三角形
向左三角形
向右三角形

编辑器

粗体
斜体

删除线

右引号

品牌

500px
安卓
安卓机器人
苹果
Behance
Bluesky
Discord
Dribbble
Etsy
Facebook
Flickr
Foursquare
GitHub
GitHub (备用)

Gitter
Google
Instagram
Joomla
LinkedIn
Mastodon
Microsoft
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-xsmall-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 角色、状态和属性设置到 Icon 组件。

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

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

文档

图标

应用

设备

存储

方向

编辑器

品牌