UIkit3.x文档

图标

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

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>

图标库

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

App

  • home
  • sign-in
  • sign-out
  • user
  • users
  • lock
  • unlock
  • settings
  • cog
  • nut
  • comment
  • commenting
  • comments
  • hashtag
  • tag
  • cart
  • 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
  • bold
  • italic
  • strikethrough

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类创建可用于社交图标的图标按钮。

<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="google-plus"></a>

图片图标

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

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

组件选项

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

Option Value Default Description
icon String '' 需显示的图标。
ratio Number 1 图标大小比例。

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

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

JavaScript

了解关于JavaScript 组件的更多信息。

初始化

UIkit.icon(element, options);

属性s

svg

可以通过添加的SVG节点解析的JavaScript Promise。

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