Icon

Plaatst daar waar je wilt een icon. Dit UIkit onderdeel maakt gebruik van Font Awesome. Font Awesome kent meer dan 300 icons die website gerelateerd zijn. Icon fonts zijn makkelijk in gebruik omdat deze ook met CSS in kleur en grootte, etc. zijn aan te passen. De icons zijn vectoren, dit houdt in dat in welke grootte dan ook je ze wilt gebruiken de icons altijd prima van kwaliteit blijven.


Gebruik

UIkit icon gebruik je door de  .uk-icon-* class aan een <i> of <span> element toe te voegen.

Een paar voorbeelden:

  • Gebruik van  .uk-icon-cog class
  • Gebruik van  .uk-icon-user class
  • Gebruik van  .uk-icon-home class
  • Een icon in een link
Een button met een icon

Hieronder de code van het voorbeeld van hierboven.
<ul class="uk-width-medium-1-3 uk-list uk-list-line">
        <li><em class="uk-icon-cog"></em> Gebruik van .uk-icon-cog class</li>
        <li><em class="uk-icon-user"></em> Gebruik van .uk-icon-user class</li>
        <li><em class="uk-icon-home"></em> Gebruik van .uk-icon-home class</li>
        <li><a href="#"><em class="uk-icon-external-link"></em> Een icon in een link</a></li>
</ul>

<a href="#" class="uk-button"><em class="uk-icon-envelope-o"></em> Een button met een icon</a>

Meer voorbeelden

Dit voorbeeld laat een groep van buttons zien met in elke button een icon.


Hieronder de code van het voorbeeld van hierboven.
<div class="uk-button-group">
<a href="#" class="uk-button"><em class="uk-icon-fast-backward"></em></a> 
<a href="#" class="uk-button"><em class="uk-icon-stop"></em></a> 
<a href="#" class="uk-button"><em class="uk-icon-play"></em></a> 
<a href="#" class="uk-button"><em class="uk-icon-fast-forward"></em></a>
</div>     

Button dropdown

Onderstaand voorbeeld is een button met links een standaard knop met icon en rechts een dropdown-menu .

Example

Hieronder de code van het voorbeeld van hierboven.

<div class="uk-button-group">
     <button class="uk-button uk-button-primary"><em class="uk-icon-folder-open"></em> Post</button>

       <div data-uk-dropdown="{mode:'click'}">
         <button class="uk-button uk-button-primary"><em class="uk-icon-caret-down"></em></button>

           <div class="uk-dropdown uk-dropdown-small">
             <ul class="uk-nav uk-nav-dropdown">
               <li><a href="#"><em class="uk-icon-edit"></em> Edit</a></li>
               <li><a href="#"><em class="uk-icon-eye"></em> View</a></li>
               <li><a href="#"><em class="uk-icon-check-square-o"></em> Enable</a></li>
               <li class="uk-nav-divider"></li>
               <li><a href="#"><em class="uk-icon-trash-o"></em> Trash</a></li>
            </ul>
        </div>
    </div>
</div>




Icon grootte aanpassen

Voeg de  .uk-icon-small, .uk-icon-medium or .uk-icon-large class toe om de icon groter te maken.

Voorbeelden:

  • Dit is de standaard (default) grootte van de icon.
  • Ietsje groter met de  .uk-icon-small class.
  • Nog ietsje groter met de  .uk-icon-medium class.
  • Groter met de  .uk-icon-large class.

Hieronder de code van het voorbeeld van hierboven.

<ul class="uk-list uk-list-space">
<li><em class="uk-icon-home"></em> Dit is de standaard (default) grootte van de icon.</li>
<li><em class="uk-icon-home uk-icon-small"></em> Ietsje groter met de .uk-icon-small class.</li>
<li><em class="uk-icon-home uk-icon-medium"></em> Nog ietsje groter met de .uk-icon-medium class.</li>
<li><em class="uk-icon-home uk-icon-large"></em> Groter met de .uk-icon-large class.</li>
</ul>

Spinner

Voeg de .uk-icon-spin class toe.

  • Spinner icon
  • Refresh icon

Icon hover

Gebruik de .uk-icon-hover class om voor een hover effect.

Example

Markup

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

Icon button

Gebruik de .uk-icon-button class om een button te maken met daarin een icon.

Example

Markup

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


De Icon's

Hieronder staat een overzicht van de te gebruiken icon's ( .uk-icon-* classes - provided by Font Awesome ).

Web Icons

  • 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 
  • battery-1
  • battery-half (alias)
  • battery-2
  • battery-three-quarters 
  • 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
  • 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

Transport Icons

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

Hand Icons

  • 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

Gender Icons

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

Filetype Icons

  • 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)

Spinner Icons

  • circle-o-notch
  • cog
  • gear (alias)
  • refresh
  • spinner

Form Control Icons

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

Payment Icons

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

Currency Icons

  • 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)

Text Editor Icons

  • 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)

Directional Icons

  • 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)

Video Player Icons

  • 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

Brand Icons

  • 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

Medical Icons

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