跳至主要內容

文件

圖示

將可縮放的向量圖示放置在您的內容中的任何位置。

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 檔案
  • 複製
  • 編輯檔案
  • 資料夾
  • 相簿
  • 推送
  • 拉取
  • 伺服器
  • 資料庫
  • 雲端上傳
  • 雲端下載
  • 下載
  • 上傳

方向

  • 回覆
  • 轉寄
  • 展開
  • 收縮
  • 右上箭頭
  • 上下箭頭
  • 上箭頭
  • 下箭頭
  • 左箭頭
  • 右箭頭
  • 向上箭頭
  • 向下箭頭
  • 向左箭頭
  • 向右箭頭
  • 向左雙箭頭
  • 向右雙箭頭
  • 向上三角形
  • 向下三角形
  • 向左三角形
  • 向右三角形

編輯器

  • 粗體
  • 斜體
  • 刪除線
  • 右引號

品牌

  • 500px
  • Android
  • Android 機器人
  • Apple
  • 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

比例

將 ratio: 2 參數加入 uk-icon 屬性中，即可將其大小加倍 – 或使用任何其他數字，取決於您希望圖示顯示多大。

<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 角色、狀態和屬性給圖示元件。

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