PO Box 9406, Group 13, Sangkat 4, OU 5, Sihanoukville, Sihanouk Province, 18204 Cambodia
donboscocf.cambodia@gmail.com Mobile: +855 12 919 834 or +855 15 919 834

Place vector icons anywhere using an icon font.

This component is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 300 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.


Usage

To apply this component, add any .uk-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

Examples

  • Uses the .uk-icon-cog class
  • Uses the .uk-icon-user class
  • Uses the .uk-icon-home class
  • An icon in a link
A button with an icon

Markup

<!-- 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>

More examples

Button group

This example shows a group of buttons from the Button component with icons inside each button.

Example


Button dropdown

This example shows a button which is split into a standard action to the left and a dropdown toggle on the right, using the Dropdown component.

Example


Blockquotes

This example shows a blockquote from the Base component with a large quote icon. It also uses the .uk-align-left class from the Utility component.

Example

The <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.


Size modifiers

Add the .uk-icon-small, .uk-icon-medium or .uk-icon-large class to an icon to make the it larger.

  • This is the default size.
  • This icon uses the .uk-icon-small class.
  • This icon uses the .uk-icon-medium class.
  • This icon uses the .uk-icon-large class.

Spin modifier

Add the .uk-icon-spin class to create animated spinning icons.

  • Spinner icon for loading content …
  • Refresh icon for refreshing content …

Icon button

Use the modifier .uk-icon-button class to create an icon button, which can be used perfectly for social icons.

Example

Markup

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

Icon mapping

Here is an overview of all available .uk-icon-* classes provided by Font Awesome.

Web Application Icons

  • adjust
  • anchor
  • archive
  • area-chart
  • arrows
  • arrows-h
  • arrows-v
  • asterisk
  • at
  • automobile (alias)
  • ban
  • bank (alias)
  • bar-chart
  • bar-chart-o (alias)
  • barcode
  • bars
  • beer
  • bell
  • bell-o
  • bell-slash
  • bell-slash-o
  • bicycle
  • binoculars
  • birthday-cake
  • bolt
  • bomb
  • book
  • bookmark
  • bookmark-o
  • briefcase
  • bug
  • building
  • building-o
  • bullhorn
  • bullseye
  • bus
  • cab (alias)
  • calculator
  • calendar
  • calendar-o
  • camera
  • camera-retro
  • car
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • cc
  • certificate
  • check
  • check-circle
  • check-circle-o
  • check-square
  • check-square-o
  • child
  • circle
  • circle-o
  • circle-o-notch
  • circle-thin
  • clock-o
  • close (alias)
  • cloud
  • cloud-download
  • cloud-upload
  • code
  • code-fork
  • coffee
  • cog
  • cogs
  • comment
  • comment-o
  • comments
  • comments-o
  • compass
  • copyright
  • credit-card
  • crop
  • crosshairs
  • cube
  • cubes
  • cutlery
  • dashboard (alias)
  • database
  • desktop
  • 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)
  • gift
  • glass
  • globe
  • graduation-cap
  • group (alias)
  • hdd-o
  • headphones
  • heart
  • heart-o
  • history
  • home
  • image (alias)
  • inbox
  • 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-marker
  • meh-o
  • microphone
  • microphone-slash
  • minus
  • minus-circle
  • minus-square
  • minus-square-o
  • mobile
  • mobile-phone (alias)
  • money
  • moon-o
  • mortar-board (alias)
  • music
  • navicon (alias)
  • newspaper-o
  • 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
  • remove (alias)
  • reorder (alias)
  • reply
  • reply-all
  • retweet
  • road
  • rocket
  • rss
  • rss-square
  • search
  • search-minus
  • search-plus
  • send (alias)
  • send-o (alias)
  • share
  • share-alt
  • share-alt-square
  • share-square
  • share-square-o
  • shield
  • 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
  • suitcase
  • sun-o
  • support (alias)
  • tablet
  • tachometer
  • tag
  • tags
  • tasks
  • taxi
  • 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)
  • trash
  • trash-o
  • tree
  • trophy
  • truck
  • tty
  • umbrella
  • university
  • unlock
  • unlock-alt
  • unsorted (alias)
  • upload
  • user
  • users
  • video-camera
  • volume-down
  • volume-off
  • volume-up
  • warning (alias)
  • wheelchair
  • wifi
  • wrench

File Type 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-discover
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • credit-card
  • google-wallet
  • paypal

Chart Icons

  • area-chart
  • bar-chart
  • bar-chart-o (alias)
  • line-chart
  • pie-chart

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
  • play
  • play-circle
  • play-circle-o
  • step-backward
  • step-forward
  • stop
  • youtube-play

Brand Icons

  • adn
  • android
  • angellist
  • apple
  • behance
  • behance-square
  • bitbucket
  • bitbucket-square
  • bitcoin (alias)
  • btc
  • cc-amex
  • cc-discover
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • codepen
  • css3
  • delicious
  • deviantart
  • digg
  • dribbble
  • dropbox
  • drupal
  • empire
  • facebook
  • facebook-square
  • flickr
  • foursquare
  • ge (alias)
  • git
  • git-square
  • github
  • github-alt
  • github-square
  • gittip
  • google
  • google-plus
  • google-plus-square
  • google-wallet
  • hacker-news
  • html5
  • instagram
  • ioxhost
  • joomla
  • jsfiddle
  • lastfm
  • lastfm-square
  • linkedin
  • linkedin-square
  • linux
  • maxcdn
  • meanpath
  • openid
  • pagelines
  • paypal
  • pied-piper
  • pied-piper-alt
  • pinterest
  • pinterest-square
  • qq
  • ra (alias)
  • rebel
  • reddit
  • reddit-square
  • renren
  • share-alt
  • share-alt-square
  • skype
  • slack
  • slideshare
  • soundcloud
  • spotify
  • stack-exchange
  • stack-overflow
  • stea
  • steam-square
  • stumbleupon
  • stumbleupon-circle
  • tencent-weibo
  • trello
  • tumblr
  • tumblr-square
  • twitch
  • twitter
  • twitter-square
  • vimeo-square
  • vine
  • vk
  • wechat (alias)
  • weibo
  • weixin
  • windows
  • wordpress
  • xing
  • xing-square
  • yahoo
  • yelp
  • youtube
  • youtube-play
  • youtube-square

Medical Icons

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

Testimonials

  • Working in Don Bosco Technical school has been an absolute pleasure so far. Being welcomed completely by the community means it only took me two months to call Sihanoukville home. Teaching English to the students here has never once been

    Elena Arellano-Templer
  • The work I have done with Don Bosco, both with teaching and helping with the Children Fund has been all too rewarding

    Maryam Mohamed
  • I am really happy to be here, because I can help poor children who want to study. Although, I cannot help them directly I feel them in my heart. Sometimes the work is hard, but I love it! 

    Pech Chanmey
  • I feel very honored to be part of Don Bosco Children Fund Cambodia. I want to help and encourage the young people of Cambodia to keep studying and to keep going for their dreams.

    Penh Sokkheng
  • Hello! I am Teacher Gary from Brisbane, Australia. I previously taught English in China and Vietnam. Now I’m pleased to be in Cambodia as a volunteer teacher at Don Bosco Sihanoukville since June 2017. It is a pleasure teaching at

    Gary Briggs

Subscribe to our newsletter

Loading
logoDon Bosco Children Fund

It is a special project of the Don Bosco Foundation of Cambodia which was opened in 1992 to outreach and care to children from disadvantage communities and orphans. It grants scholarship to poor children and is supported by international sponsors.

BRANCHES IN CAMBODIA