返回介绍

图标

发布于 2019-05-26 16:28:21 字数 51235 浏览 1212 评论 0 收藏 0

使用图标字体,在任何地方放置矢量图标。

这个组件使用了由Dave Gandy发起的 Font Awesome 图标字体。Font Awesome为web相关行为提供了超过300个标志和符号。 由于允许你通过CSS简单地改变颜色、尺寸和其他样式,图标字体是很棒的选择。它们是可伸缩的矢量图形,这意味着它们在高分辨率设备上也能很好地显示。


用法

应用此组件,在任何 <i><span> 元素中添加 .uk-icon-* 类即可。瞧,你有了一个矢量图标,它能像文本一样继承了尺寸和色彩。

示例

  • 使用 .uk-icon-cog
  • 使用 .uk-icon-user
  • 使用 .uk-icon-home
  • 链接中的图标
带有图标的按钮

标签

<!-- 图标 -->
<i class="uk-icon-cog"></i>
<!-- 链接中的图标 -->
<a href=""><i class="uk-icon-cog"></i> ...</a>

更多示例

按钮组

这个示例展示了每个按钮都带有图标的按钮租,来自 按钮组件 。

示例


按钮下拉菜单

这个示例展示了一个被分割成左边是正常按钮右边是下拉菜单切换按钮的按钮,来自下拉菜单组件。

示例

  • Edit
  • View
  • Enable
  • Trash

块引用

这个示例展示基础组件 中个块引用,它使用了一个大引号图标,还使用了效果组件中的.uk-align-left类。

示例

这里的 <blockquote> 元素定义了一个较长的引用,同时也通过在其前后插入了空白间隔创建了一个新的块。


尺寸

添加.uk-icon-small.uk-icon-medium.uk-icon-large类使一个图标更大。

  • 这是默认尺寸。This is the default size.
  • 这个图标使用 .uk-icon-small
  • 这个图标使用 .uk-icon-medium
  • 这个图标使用 .uk-icon-large

旋转

添加.uk-icon-spin创建动画的旋转图标。Add the .uk-icon-spin class to create animated spinning icons.

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

图标的 hover 效果

使用 .uk-icon-hover 修饰器将锚文本做成图标效果,它添加了hover效果并溢出了链接下划线。

Example

Markup

<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 类名。在一个列表中使用不同的图标时是很有帮助的哦。

Example

  • 调整过的图标
  • 调整过的图标
  • 调整过的图标
  • 调整过的图标

Markup

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

图标总览

这是所有一个所有可用的.uk-icon-* 类的总览,由Font Awesome提供。

Web 应用程序图标

  • adjust
  • anchor
  • archive
  • area-chart
  • arrows
  • arrows-h
  • arrows-v
  • asterisk
  • at
  • automobile (alias)
  • balance-scale
  • ban
  • bank (alias)
  • bar-chart
  • bar-chart-o (alias)
  • barcode
  • bars
  • battery-empty (alias)
  • battery-0
  • battery-quarter (alias)
  • battery-1
  • battery-half (alias)
  • battery-2
  • battery-three-quarters (alias)
  • battery-3
  • battery-full (alias)
  • 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 (alias)
  • 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 (alias)
  • 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 (alias)
  • database
  • desktop
  • diamond
  • dot-circle-o
  • download
  • edit (alias)
  • 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 (alias)
  • file-pdf-o
  • file-photo-o (alias)
  • file-picture-o (alias)
  • file-powerpoint-o
  • file-sound-o (alias)
  • file-video-o
  • file-word-o
  • file-zip-o (alias)
  • film
  • filter
  • fire
  • fire-extinguisher
  • flag
  • flag-checkered
  • flag-o
  • flash (alias)
  • flask
  • folder
  • folder-o
  • folder-open
  • folder-open-o
  • frown-o
  • futbol-o
  • gamepad
  • gavel
  • gear (alias)
  • gears (alias)
  • genderless (alias)
  • gift
  • glass
  • globe
  • graduation-cap
  • group (alias)
  • hand-lizard-o
  • hand-stop-o (alias)
  • hand-paper-o
  • hand-peace-o
  • hand-pointer-o
  • hand-grab-o (alias)
  • hand-rock-o
  • hand-scissors-o
  • hand-spock-o
  • hdd-o
  • hashtag
  • headphones
  • heart
  • heart-o
  • heartbeat
  • history
  • home
  • hotel (alias)
  • hourglass
  • hourglass-o
  • hourglass-1 (alias)
  • hourglass-start
  • hourglass-2 (alias)
  • hourglass-half
  • hourglass-3 (alias)
  • hourglass-end
  • i-cursor
  • image (alias)
  • inbox
  • industry
  • info
  • info-circle
  • institution (alias)
  • key
  • keyboard-o
  • language
  • laptop
  • leaf
  • legal (alias)
  • lemon-o
  • level-down
  • level-up
  • life-bouy (alias)
  • life-buoy (alias)
  • life-ring
  • life-saver (alias)
  • lightbulb-o
  • line-chart
  • location-arrow
  • lock
  • magic
  • magnet
  • mail-forward (alias)
  • mail-reply (alias)
  • mail-reply-all (alias)
  • 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 (alias)
  • money
  • moon-o
  • mortar-board (alias)
  • motorcycle
  • mouse-pointer
  • music
  • navicon (alias)
  • 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 (alias)
  • 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 (alias)
  • reorder (alias)
  • reply
  • reply-all
  • retweet
  • road
  • rocket
  • rss
  • rss-square
  • search
  • search-minus
  • search-plus
  • send (alias)
  • send-o (alias)
  • 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 (alias)
  • sort
  • sort-alpha-asc
  • sort-alpha-desc
  • sort-amount-asc
  • sort-amount-desc
  • sort-asc
  • sort-desc
  • sort-down (alias)
  • sort-numeric-asc
  • sort-numeric-desc
  • sort-up (alias)
  • space-shuttle
  • spinner
  • spoon
  • square
  • square-o
  • star
  • star-half
  • star-half-empty (alias)
  • star-half-full (alias)
  • star-half-o
  • star-o
  • sticky-note
  • sticky-note-o
  • street-view
  • suitcase
  • sun-o
  • support (alias)
  • 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 (alias)
  • toggle-left (alias)
  • toggle-off
  • toggle-on
  • toggle-right (alias)
  • toggle-up (alias)
  • trademark
  • trash
  • trash-o
  • tree
  • trophy
  • truck
  • tty
  • tv (alias)
  • umbrella
  • university
  • unlock
  • unlock-alt
  • unsorted (alias)
  • upload
  • usb
  • user
  • user-plus
  • user-secret
  • user-times
  • users
  • video-camera
  • volume-down
  • volume-off
  • volume-up
  • warning (alias)
  • wheelchair
  • wifi
  • wrench

交通工具图标

  • ambulance
  • automobile (alias)
  • bicycle
  • bus
  • cab (alias)
  • car
  • fighter-jet
  • motorcycle
  • plane
  • rocket
  • ship
  • space-shuttle
  • subway
  • taxi
  • train
  • truck
  • wheelchair

手势图标

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

性别图标

  • genderless (alias)
  • mars
  • mars-double
  • mars-stroke
  • mars-stroke-h
  • mars-stroke-v
  • mercury
  • neuter
  • transgender
  • transgender-alt
  • venus
  • venus-double
  • venus-mars

文件类型图标

  • file
  • file-archive-o
  • file-audio-o
  • file-code-o
  • file-excel-o
  • file-image-o
  • file-movie-o (alias)
  • file-o
  • file-pdf-o
  • file-photo-o (alias)
  • file-picture-o (alias)
  • file-powerpoint-o
  • file-sound-o (alias)
  • file-text
  • file-text-o
  • file-video-o
  • file-word-o
  • file-zip-o (alias)

旋转图标

  • circle-o-notch
  • cog
  • gear (alias)
  • 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

支付工具图标

  • cc-amex
  • cc-diners-club
  • cc-discover
  • cc-jcb
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • credit-card
  • google-wallet
  • paypal

货币

  • bitcoin (alias)
  • btc
  • cny (alias)
  • dollar (alias)
  • eur
  • euro (alias)
  • gbp
  • ils
  • inr
  • jpy
  • krw
  • money
  • rmb (alias)
  • rouble (alias)
  • rub
  • ruble (alias)
  • rupee (alias)
  • shekel (alias)
  • sheqel (alias)
  • try
  • turkish-lira (alias)
  • usd
  • won (alias)
  • yen (alias)

文本编辑器

  • align-center
  • align-justify
  • align-left
  • align-right
  • bold
  • chain (alias)
  • chain-broken
  • clipboard
  • columns
  • copy (alias)
  • cut (alias)
  • dedent (alias)
  • eraser
  • file
  • file-o
  • file-text
  • file-text-o
  • files-o
  • floppy-o
  • font
  • header
  • indent
  • italic
  • link
  • list
  • list-alt
  • list-ol
  • list-ul
  • outdent
  • paperclip
  • paragraph
  • paste (alias)
  • repeat
  • rotate-left (alias)
  • rotate-right (alias)
  • save (alias)
  • scissors
  • strikethrough
  • subscript
  • superscript
  • table
  • text-height
  • text-width
  • th
  • th-large
  • th-list
  • underline
  • undo
  • unlink (alias)

方向

  • angle-double-down
  • angle-double-left
  • angle-double-right
  • angle-double-up
  • angle-down
  • angle-left
  • angle-right
  • angle-up
  • arrow-circle-down
  • arrow-circle-left
  • arrow-circle-o-down
  • arrow-circle-o-left
  • arrow-circle-o-right
  • arrow-circle-o-up
  • arrow-circle-right
  • arrow-circle-up
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • arrows
  • arrows-alt
  • arrows-h
  • arrows-v
  • caret-down
  • caret-left
  • caret-right
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • caret-up
  • chevron-circle-down
  • chevron-circle-left
  • chevron-circle-right
  • chevron-circle-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • hand-o-down
  • hand-o-left
  • hand-o-right
  • hand-o-up
  • long-arrow-down
  • long-arrow-left
  • long-arrow-right
  • long-arrow-up
  • toggle-down (alias)
  • toggle-left (alias)
  • toggle-right (alias)
  • toggle-up (alias)

视频播放器

  • arrows-alt
  • backward
  • compress
  • eject
  • expand
  • fast-backward
  • fast-forward
  • forward
  • pause
  • pause-circle
  • pause-circle-o
  • play
  • play-circle
  • play-circle-o
  • step-backward
  • step-forward
  • stop
  • stop-circle
  • stop-circle-o
  • youtube-play

品牌图标

  • 500px
  • adn
  • amazon
  • android
  • angellist
  • apple
  • behance
  • behance-square
  • bitbucket
  • bitbucket-square
  • bitcoin (alias)
  • black-tie
  • bluetooth
  • bluetooth-b
  • btc
  • buysellads
  • cc-amex
  • cc-diners-club
  • cc-discover
  • cc-jcb
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • chrome
  • codepen
  • codiepie
  • connectdevelop
  • contao
  • css3
  • dashcube
  • delicious
  • deviantart
  • digg
  • dribbble
  • dropbox
  • drupal
  • edge
  • empire
  • expeditedssl
  • facebook
  • facebook-f (alias)
  • facebook-official
  • facebook-square
  • firefox
  • flickr
  • fonticons
  • fort-awesome
  • forumbee
  • foursquare
  • ge (alias)
  • get-pocket
  • gg
  • gg-circle
  • git
  • git-square
  • github
  • github-alt
  • github-square
  • gittip (alias)
  • google
  • google-plus
  • google-plus-square
  • google-wallet
  • gratipay
  • hacker-news
  • houzz
  • html5
  • instagram
  • internet-explorer
  • ioxhost
  • joomla
  • jsfiddle
  • lastfm
  • lastfm-square
  • leanpub
  • linkedin
  • linkedin-square
  • linux
  • maxcdn
  • meanpath
  • medium-logo
  • mixcloud
  • modx
  • odnoklassniki
  • odnoklassniki-square
  • opencart
  • openid
  • opera
  • optin-monster
  • pagelines
  • paypal
  • pied-piper
  • pied-piper-alt
  • pinterest
  • pinterest-p
  • pinterest-square
  • product-hunt
  • qq
  • ra (alias)
  • 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
  • trello
  • tripadvisor
  • tumblr
  • tumblr-square
  • twitch
  • twitter
  • twitter-square
  • usb
  • viacoin
  • vimeo
  • vimeo-square
  • vine
  • vk
  • wechat (alias)
  • weibo
  • weixin
  • whatsapp
  • wikipedia-w
  • windows
  • wordpress
  • xing
  • xing-square
  • y-combinator
  • y-combinator-square
  • yahoo
  • yc (alias)
  • yc-square (alias)
  • yelp
  • youtube
  • youtube-play
  • youtube-square

医疗类图标

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文