图标

使用图标字体在任何位置放置矢量图标。

此组件使用 Dave Gandy 的优秀项目 Font Awesome 图标字体。 Font Awesome 总共为 Web 相关操作提供了 300 多个符号和字形。图标字体非常棒，因为它们允许您通过 CSS 轻松更改颜色、大小等。它们是可缩放的矢量图形，这意味着它们在高分辨率显示器上看起来很棒。

用法

要应用此组件，请将任何 .uk-icon-* 类添加到 <i> 或 <span> 元素。瞧，您就拥有了一个矢量图标，它会像文本一样继承大小和颜色。

示例

使用 .uk-icon-cog 类
使用 .uk-icon-user 类
使用 .uk-icon-home 类
链接中的图标

带有图标的按钮

标记

<!-- This is an icon -->
<i class="uk-icon-cog"></i>

<!-- This is an icon in a link -->
<a href=""><i class="uk-icon-cog"></i> ...</a>

大小修饰符

将 .uk-icon-small、.uk-icon-medium 或 .uk-icon-large 类添加到图标以使其更大。

这是默认大小。
此图标使用 .uk-icon-small 类。
此图标使用 .uk-icon-medium 类。
此图标使用 .uk-icon-large 类。

旋转修饰符

添加 .uk-icon-spin 类以创建动画旋转图标。

用于加载内容的旋转图标...
用于刷新内容的刷新图标...

图标悬停

使用修饰符 .uk-icon-hover 类将锚点用作图标，应用悬停效果并删除链接下划线。

示例

标记

<a href="" class="uk-icon-hover uk-icon-github"></a>

图标按钮

使用修饰符 .uk-icon-button 类创建图标按钮，该按钮非常适合用于社交图标。

示例

标记

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

对齐图标

要向图标添加固定宽度并将其居中，请添加 .uk-icon-justify 类。当在列表中使用不同的图标时，这很有用。

示例

对齐的图标
对齐的图标
对齐的图标
对齐的图标

标记

<a href="" class="uk-icon-justify uk-icon-github"></a>

图标映射

以下是 Font Awesome 提供的所有可用 .uk-icon-* 类的概述。

Web 应用程序图标

adjust
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asterisk
at
automobile （别名）
balance-scale
ban
bank （别名）
bar-chart
bar-chart-o （别名）
barcode
bars
battery-empty （别名）
battery-0
battery-quarter （别名）
battery-1
battery-half （别名）
battery-2
battery-three-quarters （别名）
battery-3
battery-full （别名）
battery-4
bed
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bluetooth
bluetooth-b
bolt
bomb
book
bookmark
bookmark-o
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab （别名）
calculator
calendar
calendar-check-o
calendar-minus-o
calendar-o
calendar-plus-o
calendar-times-o
camera
camera-retro
car
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
cart-arrow-down
cart-plus
cc
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
clone
close （别名）
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
commenting
commenting-o
comments
comments-o
compass
copyright
creative-commons
credit-card
credit-card-alt
crop
crosshairs
cube
cubes
cutlery
dashboard （别名）
database
desktop
diamond
dot-circle-o
download
edit （别名）
ellipsis-h
ellipsis-v
envelope
envelope-o
envelope-square
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eye-slash
eyedropper
fax
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (别名)
file-pdf-o
file-photo-o (别名)
file-picture-o (别名)
file-powerpoint-o
file-sound-o (别名)
file-video-o
file-word-o
file-zip-o (别名)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (别名)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (别名)
gears (别名)
genderless (别名)
gift
glass
globe
graduation-cap
group (别名)
hand-lizard-o
hand-stop-o (别名)
hand-paper-o
hand-peace-o
hand-pointer-o
hand-grab-o (别名)
hand-rock-o
hand-scissors-o
hand-spock-o
hdd-o
hashtag
headphones
heart
heart-o
heartbeat
history
home
hotel (别名)
hourglass
hourglass-o
hourglass-1 (别名)
hourglass-start
hourglass-2 (别名)
hourglass-half
hourglass-3 (别名)
hourglass-end
i-cursor
image (别名)
inbox
industry
info
info-circle
institution (别名)
key
keyboard-o
language
laptop
leaf
legal (别名)
lemon-o
level-down
level-up
life-bouy (别名)
life-buoy (别名)
life-ring
life-saver (别名)
lightbulb-o
line-chart
location-arrow
lock
magic
magnet
mail-forward (别名)
mail-reply (别名)
mail-reply-all (别名)
male
map
map-marker
map-o
map-pin
map-signs
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (别名)
money
moon-o
mortar-board (别名)
motorcycle
mouse-pointer
music
navicon (别名)
newspaper-o
object-group
object-ungroup
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
percent
phone
phone-square
photo (别名)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
recycle
refresh
registered
remove (别名)
reorder (别名)
reply
reply-all
retweet
road
rocket
rss
rss-square
search
search-minus
search-plus
send (别名)
send-o (别名)
server
share
share-alt
share-alt-square
share-square
share-square-o
shield
ship
shopping-bag
shopping-basket
shopping-cart
sign-in
sign-out
signal
sitemap
sliders
smile-o
soccer-ball-o (别名)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (别名)
sort-numeric-asc
sort-numeric-desc
sort-up (别名)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (别名)
star-half-full (别名)
star-half-o
star-o
sticky-note
sticky-note-o
street-view
suitcase
sun-o
support (别名)
tablet
tachometer
tag
tags
tasks
taxi
television
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (别名)
toggle-left (别名)
toggle-off
toggle-on
toggle-right (别名)
toggle-up (别名)
trademark
trash
trash-o
tree
trophy
truck
tty
tv (别名)
umbrella
university
unlock
unlock-alt
unsorted (别名)
upload
usb
user
user-plus
user-secret
user-times
users
video-camera
volume-down
volume-off
volume-up
warning (别名)
wheelchair
wifi
wrench

交通图标

ambulance
automobile （别名）
bicycle
bus
cab （别名）
car
fighter-jet
motorcycle
plane
rocket
ship
space-shuttle
subway
taxi
火车
truck
wheelchair

无障碍图标

美国手语翻译
美国手语翻译 (别名)
辅助听力系统
音频描述
盲人
盲文
cc
聋人
失聪 (别名)
听力障碍 (别名)
低视力
问号圆圈（空心）
手语
手语 (别名)
tty
通用访问
电话音量控制
wheelchair
轮椅 (替代)

手部图标

hand-lizard-o
hand-stop-o (别名)
hand-paper-o
hand-peace-o
hand-pointer-o
hand-grab-o (别名)
hand-rock-o
hand-scissors-o
hand-spock-o
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up

性别图标

genderless (别名)
火星 (男性)
双火星 (双男性)
火星符号 (男性)
火星符号 (男性, 横向)
火星符号 (男性, 纵向)
水星 (中性)
中性
变性人
变性人 (替代)
金星 (女性)
双金星 (双女性)
金星火星 (男女)

文件类型图标

文件
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (别名)
文件 (空心)
file-pdf-o
file-photo-o (别名)
file-picture-o (别名)
file-powerpoint-o
file-sound-o (别名)
文件 (文本)
文件 (文本, 空心)
file-video-o
file-word-o
file-zip-o (别名)

加载图标

circle-o-notch
cog
gear (别名)
refresh
spinner

表单控件图标

check-square
check-square-o
circle
circle-o
dot-circle-o
minus-square
minus-square-o
plus-square
plus-square-o
square
square-o

支付图标

美国运通卡
大莱卡
发现卡
JCB卡
万事达卡
贝宝
Stripe支付
维萨卡
credit-card
Google钱包
贝宝

货币图标

比特币 (别名)
比特币
人民币 (别名)
美元 (别名)
欧元
欧元 (别名)
英镑
以色列新谢克尔
印度卢比
日元
韩元
money
人民币 (别名)
卢布 (别名)
卢布
卢布 (别名)
卢比 (别名)
谢克尔 (别名)
谢克尔 (别名)
土耳其里拉
土耳其里拉 (别名)
美元
韩元 (别名)
日元 (别名)

文本编辑器图标

居中对齐
两端对齐
左对齐
右对齐
加粗
链条 (别名)
断开的链条
剪贴板
列
复制 (别名)
剪切 (别名)
减少缩进 (别名)
eraser
文件
文件 (空心)
文件 (文本)
文件 (文本, 空心)
多个文件 (空心)
软盘 (空心)
字体
标题
增加缩进
斜体
链接
列表
列表 (替代)
有序列表
无序列表
减少缩进
回形针
段落
粘贴 (别名)
重复
左旋转 (别名)
右旋转 (别名)
保存 (别名)
剪刀
删除线
下标
上标
表格
文本高度
文本宽度
表头
大表头
表头列表
下划线
撤销
取消链接 (别名)

方向图标

双向下箭头
双向左箭头
双向右箭头
双向上箭头
向下箭头
向左箭头
向右箭头
向上箭头
向下箭头圆圈
向左箭头圆圈
向下箭头圆圈 (空心)
向左箭头圆圈 (空心)
向右箭头圆圈 (空心)
向上箭头圆圈 (空心)
向右箭头圆圈
向上箭头圆圈
向下箭头
向左箭头
向右箭头
向上箭头
arrows
多个方向箭头
arrows-h
arrows-v
向下三角形
向左三角形
向右三角形
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
向上三角形
向下箭头圆圈
向左箭头圆圈
向右箭头圆圈
向上箭头圆圈
向下箭头
向左箭头
向右箭头
向上箭头
手 (向下)
手 (向左)
手 (向右)
手 (向上)
长向下箭头
长向左箭头
长向右箭头
长向上箭头
toggle-down (别名)
toggle-left (别名)
toggle-right (别名)
toggle-up (别名)

视频播放器图标

多个方向箭头
后退
压缩
弹出
展开
快退
快进
前进
暂停
暂停圆圈
暂停圆圈 (空心)
播放
播放圆圈
播放圆圈 (空心)
步退
步进
停止
停止圆圈
停止圆圈 (空心)
YouTube 播放

品牌图标

500px
ADN
亚马逊
安卓
AngelList
苹果
Behance
Behance (方形)
Bitbucket
Bitbucket (方形)
比特币 (别名)
Black Tie
bluetooth
bluetooth-b
比特币
BuySellAds
美国运通卡
大莱卡
发现卡
JCB卡
万事达卡
贝宝
Stripe支付
维萨卡
Chrome浏览器
CodePen
Codiepie
Connectdevelop
Contao
CSS3
Dashcube
Delicious
DeviantArt
Digg
Dribbble
Dropbox
Drupal
Edge浏览器
帝国
ExpeditedSSL
Font Awesome (别名)
Facebook
Facebook (简写) (别名)
Facebook (官方)
Facebook (方形)
Firefox浏览器
第一秩序
Flickr
Font Awesome
Fonticons
Fort Awesome
Forumbee
Foursquare
帝国 (别名)
Get Pocket
GG
GG (圆形)
Git
Git (方形)
GitHub
GitHub (替代)
GitHub (方形)
Gittip (别名)
Google
Google+
Google+ (方形)
Google钱包
Gratipay
Hacker News
Houzz
HTML5
Instagram
Internet Explorer浏览器
ioxhost
Joomla
jsFiddle
Last.fm
Last.fm (方形)
Leanpub
LinkedIn
LinkedIn (方形)
Linux
MaxCDN
Meanpath
Medium
Mixcloud
MODX
Odnoklassniki
Odnoklassniki (方形)
OpenCart
OpenID
Opera浏览器
Optin Monster
Pagelines
贝宝
Pied Piper
Pied Piper (替代)
Pinterest
Pinterest (P字)
pinterest-square
product-hunt
qq
ra (别名)
rebel
reddit
reddit-alien
reddit-square
renren
safari
scribd
sellsy
share-alt
share-alt-square
shirtsinbulk
simplybuilt
skyatlas
skype
slack
slideshare
soundcloud
spotify
stack-exchange
stack-overflow
steam
steam-square
stumbleupon
stumbleupon-circle
tencent-weibo
themeisle
trello
tripadvisor
tumblr
tumblr-square
twitch
twitter
twitter-square
usb
viacoin
vimeo
vimeo-square
vine
vk
wechat (别名)
weibo
weixin
whatsapp
wikipedia-w
windows
wordpress
xing
xing-square
y-combinator
y-combinator-square
yahoo
yc (别名)
yc-square (别名)
yelp
yoast
youtube
YouTube 播放
youtube-square
glide
glide-g
snapchat
snapchat-ghost
snapchat-square
viadeo
viadeo-square

医疗图标

ambulance
h-square
hospital-o
medkit
plus-square
stethoscope
user-md
wheelchair

图标

用法

示例

标记

更多示例

按钮组

示例

按钮下拉菜单

示例

块引用

示例