跳到主要内容

文档

Icon

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

UIkit 自带一套 SVG 图标系统和一个内容丰富的图标库，其中包含数量不断增加的精致线框图标。该组件会把 SVG 注入到页面中，所以它们能继承颜色，并可以用 CSS 设置样式。

用法

请确保引入了图标库脚本，详情请参阅安装说明。

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

要应用该组件，为 <span> 或 <a> 元素添加 uk-icon 属性。要显示实际的图标，需要在属性中追加 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>

图标库

以下是当前所有可用图标的概览。我们会持续向列表中添加新图标。

应用

  • 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
  • crosshairs
  • pencil
  • trash
  • move
  • link
  • link-external
  • eye
  • eye-slash
  • question
  • info
  • warning
  • image
  • thumbnails
  • table
  • list
  • menu
  • grid
  • more
  • more-vertical
  • plus
  • plus-circle
  • minus
  • minus-circle
  • close
  • close-circle
  • check
  • ban
  • refresh
  • play
  • play-circle

设备

  • tv
  • desktop
  • laptop
  • tablet
  • phone
  • tablet-landscape
  • phone-landscape

存储

  • file
  • file-text
  • file-pdf
  • copy
  • file-edit
  • folder
  • album
  • push
  • pull
  • server
  • database
  • cloud-upload
  • cloud-download
  • download
  • upload

方向

  • reply
  • forward
  • expand
  • shrink
  • arrow-up-right
  • arrow-down-arrow-up
  • 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

编辑器

  • bold
  • italic
  • strikethrough
  • quote-right

品牌

  • 500px
  • android
  • android-robot
  • apple
  • behance
  • bluesky
  • discord
  • dribbble
  • etsy
  • facebook
  • flickr
  • foursquare
  • github
  • github-alt
  • 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-overlay 修饰符类，可以使图标在背景图片上呈现最佳效果。

<span class="uk-icon-overlay" uk-icon="play-circle"></a>
<div class="uk-child-width-1-2@m" uk-grid>
    <div>

        <a href class="uk-inline uk-dark">
            <img src="images/light.jpg" width="1800" height="1200" alt="">
            <div class="uk-position-center">
                <span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: play-circle"></span>
            </div>
        </a>

    </div>
    <div>

        <a href class="uk-inline uk-light">
            <img src="images/dark.jpg" width="1800" height="1200" alt="">
            <div class="uk-position-center">
                <span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: youtube"></span>
            </div>
        </a>

    </div>
</div>

图片修饰符

你也可以让任何背景图片缩放到图标的尺寸。只需添加 .uk-icon-image 类和背景图片路径。

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

组件选项

这些选项都可以应用于组件属性。多个选项之间用分号分隔。了解更多

选项 值 默认 描述
icon String 要显示的图标。
ratio Number 1 图标尺寸比例。

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

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

JavaScript

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

初始化

UIkit.icon(element, options);

属性

svg

一个 JavaScript Promise，在注入的 SVG 节点就绪后 resolve。

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

可访问性

为 Icon 组件设置合适的 WAI-ARIA 角色、状态和属性。

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