图标／Icon

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

UIkit自带了一个SVG图标系统和一个综合库，其中包括越来越多的优雅图标。该组件将SVG注入网站，以便它们可以使用CSS设置颜色和样式。

用法

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

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

要应用此组件，请将 uk-icon 属性添加到  或 <a> 元素。要显示实际图标，需要将 icon: NAME p参数附加到属性。然后您就有了一个可以像文本一样继承了颜色的矢量图标。

<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>

图标库

以下是所有当前可用的图标。随着时间的推移，我们会不断的添加新图标。

App

home
sign-in
sign-out
user
users
lock
unlock
settings
cog
nut
comment
commenting
comments
hashtag
tag
cart
bag
credit-card
mail
receiver
print
search
location
bookmark

code
paint-bucket
camera
video-camera
bell
microphone
bolt
star
heart
happy
lifesaver
rss
social
git-branch
git-fork
world
calendar
clock
history
future
pencil
trash
move

link
question
info
warning
image
thumbnails
table
list
menu
grid
more
more-vertical
plus
plus-circle
minus
minus-circle
close
check
ban
refresh
play
play-circle

Devices设备

tv
desktop
laptop

tablet
phone

tablet-landscape
phone-landscape

Storage存储

file
file-text
file-pdf
copy
file-edit

folder
album
push
pull
server

database
cloud-upload
cloud-download
download
upload

Direction方向

reply
forward
expand
shrink
arrow-up
arrow-down

arrow-left
arrow-right
chevron-up
chevron-down
chevron-left
chevron-right

chevron-double-left
chevron-double-right
triangle-up
triangle-down
triangle-left
triangle-right

Editor编辑

bold
italic

strikethrough

quote-right

Brands标志

500px
behance
discord
dribbble
etsy
facebook
flickr
foursquare
github
github-alt
gitter

google
instagram
joomla
linkedin
pagekit
pinterest
reddit
soundcloud
tiktok
tripadvisor

tumblr
twitch
twitter
uikit
vimeo
whatsapp
wordpress
xing
yelp
youtube

比例

将 ratio: 2 参数添加到 uk-icon 属性可以使图标大小翻倍，也可以根据您希望达到的图标大小来改为任何数字。

<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 class。

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

<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>

图标按钮

在 <a> 元素上使用.uk-icon-button class创建可用于社交图标的图标按钮。

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

<a href="" class="uk-icon-button uk-margin-small-right" uk-icon="twitter"></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>

图片图标

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

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

组件选项

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

选项	可用值	默认值	描述
`icon`	String	`''`	需显示的图标
`ratio`	Number	`1`	图标大小比例

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

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

# 图标／Icon 将可缩放矢量图标放置在内容中的任何位置。 UIkit自带了一个SVG图标系统和一个综合库，其中包括越来越多的优雅图标。该组件将SVG注入网站，以便它们可以使用CSS设置颜色和样式。 *** ## Usage-用法请确保包含图标库脚本，有关更多详细信息，请参考 [安装说明](installation.md)。 ```html <script src="uikit/dist/js/uikit-icons.min.js"></script> ``` 要应用此组件，请将 `uk-icon` 属性添加到 `` 或 `<a>` 元素。要显示实际图标，需要将 `icon: NAME` p参数附加到属性。然后您就有了一个可以像文本一样继承了颜色的矢量图标。 ```html <a href="" uk-icon="icon: heart"></a> ``` 如果 `icon` 是属性值中的唯一选项，那么还可以使用 `uk-icon="NAME"` ```html ``` ```example <a href="" uk-icon="heart"></a> ``` *** ## Library-图标库以下是所有当前可用的图标。随着时间的推移，我们会不断的添加新图标。 <h4 class="uk-heading-line">App</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> home</li> <li> sign-in</li> <li> sign-out</li> <li> user</li> <li> users</li> <li> lock</li> <li> unlock</li> <li> settings</li> <li> cog</li> <li> nut</li> <li> comment</li> <li> commenting</li> <li> comments</li> <li> hashtag</li> <li> tag</li> <li> cart</li> <li> bag</li> <li> credit-card</li> <li> mail</li> <li> receiver</li> <li> print</li> <li> search</li> <li> location</li> <li> bookmark</li> </ul> </div> <div> <ul class="uk-list"> <li> code</li> <li> paint-bucket</li> <li> camera</li> <li> video-camera</li> <li> bell</li> <li> microphone</li> <li> bolt</li> <li> star</li> <li> heart</li> <li> happy</li> <li> lifesaver</li> <li> rss</li> <li> social</li> <li> git-branch</li> <li> git-fork</li> <li> world</li> <li> calendar</li> <li> clock</li> <li> history</li> <li> future</li> <li> pencil</li> <li> trash</li> <li> move</li> </ul> </div> <div> <ul class="uk-list"> <li> link</li> <li> question</li> <li> info</li> <li> warning</li> <li> image</li> <li> thumbnails</li> <li> table</li> <li> list</li> <li> menu</li> <li> grid</li> <li> more</li> <li> more-vertical</li> <li> plus</li> <li> plus-circle</li> <li> minus</li> <li> minus-circle</li> <li> close</li> <li> check</li> <li> ban</li> <li> refresh</li> <li> play</li> <li> play-circle</li> </ul> </div> </div> <h4 class="uk-heading-line">Devices设备</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> tv</li> <li> desktop</li> <li> laptop</li> </ul> </div> <div> <ul class="uk-list"> <li> tablet</li> <li> phone</li> </ul> </div> <div> <ul class="uk-list"> <li> tablet-landscape</li> <li> phone-landscape</li> </ul> </div> </div> <h4 class="uk-heading-line">Storage存储</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> file</li> <li> file-text</li> <li> file-pdf</li> <li> copy</li> <li> file-edit</li> </ul> </div> <div> <ul class="uk-list"> <li> folder</li> <li> album</li> <li> push</li> <li> pull</li> <li> server</li> </ul> </div> <div> <ul class="uk-list"> <li> database</li> <li> cloud-upload</li> <li> cloud-download</li> <li> download</li> <li> upload</li> </ul> </div> </div> <h4 class="uk-heading-line">Direction方向</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> reply</li> <li> forward</li> <li> expand</li> <li> shrink</li> <li> arrow-up</li> <li> arrow-down</li> </ul> </div> <div> <ul class="uk-list"> <li> arrow-left</li> <li> arrow-right</li> <li> chevron-up</li> <li> chevron-down</li> <li> chevron-left</li> <li> chevron-right</li> </ul> </div> <div> <ul class="uk-list"> <li> chevron-double-left</li> <li> chevron-double-right</li> <li> triangle-up</li> <li> triangle-down</li> <li> triangle-left</li> <li> triangle-right</li> </ul> </div> </div> <h4 class="uk-heading-line">Editor编辑</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> bold</li> <li> italic</li> </ul> </div> <div> <ul class="uk-list"> <li> strikethrough</li> </ul> </div> <div> <ul class="uk-list"> <li> quote-right</li> </ul> </div> </div> <h4 class="uk-heading-line">Brands标志</h4> <div class="uk-child-width-1-3@s" uk-grid> <div> <ul class="uk-list"> <li> 500px</li> <li> behance</li> <li> discord</li> <li> dribbble</li> <li> etsy</li> <li> facebook</li> <li> flickr</li> <li> foursquare</li> <li> github</li> <li> github-alt</li> <li> gitter</li> </ul> </div> <div> <ul class="uk-list"> <li> google</li> <li> instagram</li> <li> joomla</li> <li> linkedin</li> <li> pagekit</li> <li> pinterest</li> <li> reddit</li> <li> soundcloud</li> <li> tiktok</li> <li> tripadvisor</li> </ul> </div> <div> <ul class="uk-list"> <li> tumblr</li> <li> twitch</li> <li> twitter</li> <li> uikit</li> <li> vimeo</li> <li> whatsapp</li> <li> wordpress</li> <li> xing</li> <li> yelp</li> <li> youtube</li> </ul> </div> </div> *** ## Ratio-比例将 `ratio: 2` 参数添加到 `uk-icon` 属性可以使图标大小翻倍，也可以根据您希望达到的图标大小来改为任何数字。 ```html ``` ```example ``` *** ## Link modifier-图标链接若要将图标作为锚点，并且需要将默认链接样式重置为更柔和的颜色，请添加 `.uk-icon-link` class。 ```html <a href="" class="uk-icon-link" uk-icon="heart"></a> ``` ```example <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> ``` *** ## Button modifier-图标按钮在 `<a>` 元素上使用`.uk-icon-button` class创建可用于社交图标的图标按钮。 ```html <a href="" class="uk-icon-button" uk-icon="twitter"></a> ``` ```example <a href="" class="uk-icon-button uk-margin-small-right" uk-icon="twitter"></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> ``` *** ## Image modifier-图片图标您还可以使任何背景图像缩放到图标大小。只需添加 `.uk-icon-image` class和背景图像路径即可。 ```example ``` *** ## Component options-组件选项下面选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration) | 选项 | 可用值 | 默认值 | 描述 | |:--------|:-------|:--------|:---------------------| | `icon` | String | `''` | 需显示的图标 | | `ratio` | Number | `1` | 图标大小比例 | `icon` 是 _Primary_ 选项，如果它是属性值中的唯一选项，则可以省略其键。 ```html ``` *** ## JavaScript 了解关于 [JavaScript 组件](javascript.md#programmatic-use)的更多信息。 ### 初始化 ```js UIkit.icon(element, options); ``` ### 属性 #### svg 可以通过添加的SVG节点解析的JavaScript Promise。 ```js UIkit.icon(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; }) ```

文档