图标
将可缩放矢量图标放置在内容中的任何位置。
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>
图标库
以下是所有当前可用的图标。随着时间的推移，我们会不断的添加新图标。
App
- home
- sign-in
- sign-out
- user
- users
- lock
- unlock
- settings
- cog
- nut
- comment
- commenting
- comments
- hashtag
- tag
- cart
- bag
- credit-card
- receiver
- 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
- flickr
- foursquare
- github
- github-alt
- gitter
- joomla
- pagekit
- soundcloud
- tiktok
- tripadvisor
- tumblr
- twitch
- uikit
- vimeo
- wordpress
- 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类创建可用于社交图标的图标按钮。
<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类和背景图像路径即可。
-
<span class="uk-icon uk-icon-image" style="background-image: url(images/dark.jpg);"></span>
组件选项
下面选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 了解更多
| Option | Value | Default | Description |
|---|---|---|---|
icon |
String | '' |
需显示的图标。 |
ratio |
Number | 1 |
图标大小比例。 |
icon是Primary选项，如果它是属性值中的唯一选项，则可以省略其键。
<span uk-icon="heart"></span>
JavaScript
了解关于JavaScript 组件的更多信息。
初始化
UIkit.icon(element, options);
属性
svg
可以通过添加的SVG节点解析JavaScript Promise。
UIkit.icon(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })