icon-compass
icon-collapse
icon-collapse-top
icon-expand
icon-eur
icon-euro (alias)
icon-gbp
icon-usd
icon-dollar (alias)
icon-inr
icon-rupee (alias)
icon-jpy
icon-yen (alias)
icon-cny
icon-renminbi (alias)
icon-krw
icon-won (alias)
icon-btc
icon-bitcoin (alias)
icon-file
icon-file-text
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-thumbs-up
icon-thumbs-down
icon-youtube-sign
icon-youtube
icon-xing
icon-xing-sign
icon-youtube-play
icon-dropbox
icon-stackexchange
icon-instagram
icon-flickr
icon-adn
icon-bitbucket
icon-bitbucket-sign
icon-tumblr
icon-tumblr-sign
icon-long-arrow-down
icon-long-arrow-up
icon-long-arrow-left
icon-long-arrow-right
icon-apple
icon-windows
icon-android
icon-linux
icon-dribbble
icon-skype
icon-foursquare
icon-trello
icon-female
icon-male
icon-gittip
icon-sun
icon-moon
icon-archive
icon-bug
icon-vk
icon-weibo
icon-renren
icon-adjust
icon-anchor
icon-archive
icon-asterisk
icon-ban-circle
icon-bar-chart
icon-barcode
icon-beaker
icon-beer
icon-bell
icon-bell-alt
icon-bolt
icon-book
icon-bookmark
icon-bookmark-empty
icon-briefcase
icon-bug
icon-building
icon-bullhorn
icon-bullseye
icon-calendar
icon-calendar-empty
icon-camera
icon-camera-retro
icon-certificate
icon-check
icon-check-empty
icon-check-minus
icon-check-sign
icon-circle
icon-circle-blank
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-code
icon-code-fork
icon-coffee
icon-cog
icon-cogs
icon-collapse
icon-collapse-alt
icon-collapse-top
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-compass
icon-credit-card
icon-crop
icon-dashboard
icon-desktop
icon-download
icon-download-alt
icon-edit
icon-edit-sign
icon-ellipsis-horizontal
icon-ellipsis-vertical
icon-envelope
icon-envelope-alt
icon-eraser
icon-exchange
icon-exclamation
icon-exclamation-sign
icon-expand
icon-expand-alt
icon-external-link
icon-external-link-sign
icon-eye-close
icon-eye-open
icon-facetime-video
icon-female
icon-fighter-jet
icon-film
icon-filter
icon-fire
icon-fire-extinguisher
icon-flag
icon-flag-alt
icon-flag-checkered
icon-folder-close
icon-folder-close-alt
icon-folder-open
icon-folder-open-alt
icon-food
icon-frown
icon-gamepad
icon-gear (alias)
icon-gears (alias)
icon-gift
icon-glass
icon-globe
icon-group
icon-hdd
icon-headphones
icon-heart
icon-heart-empty
icon-home
icon-inbox
icon-info
icon-info-sign
icon-key
icon-keyboard
icon-laptop
icon-leaf
icon-legal
icon-lemon
icon-level-down
icon-level-up
icon-lightbulb
icon-location-arrow
icon-lock
icon-magic
icon-magnet
icon-mail-forward (alias)
icon-mail-reply (alias)
icon-mail-reply-all
icon-male
icon-map-marker
icon-meh
icon-microphone
icon-microphone-off
icon-minus
icon-minus-sign
icon-minus-sign-alt
icon-mobile-phone
icon-money
icon-moon
icon-move
icon-music
icon-off
icon-ok
icon-ok-circle
icon-ok-sign
icon-pencil
icon-phone
icon-phone-sign
icon-picture
icon-plane
icon-plus
icon-plus-sign
icon-plus-sign-alt
icon-power-off (alias)
icon-print
icon-pushpin
icon-puzzle-piece
icon-qrcode
icon-question
icon-question-sign
icon-quote-left
icon-quote-right
icon-random
icon-refresh
icon-remove
icon-remove-circle
icon-remove-sign
icon-reorder
icon-reply
icon-reply-all
icon-resize-horizontal
icon-resize-vertical
icon-retweet
icon-road
icon-rocket
icon-rss
icon-rss-sign
icon-screenshot
icon-search
icon-share
icon-share-alt
icon-share-sign
icon-shield
icon-shopping-cart
icon-sign-blank
icon-signal
icon-signin
icon-signout
icon-sitemap
icon-smile
icon-sort
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-sort-down
icon-sort-up
icon-spinner
icon-star
icon-star-empty
icon-star-half
icon-star-half-empty
icon-star-half-full (alias)
icon-subscript
icon-suitcase
icon-sun
icon-superscript
icon-tablet
icon-tag
icon-tags
icon-tasks
icon-terminal
icon-thumbs-down
icon-thumbs-down-alt
icon-thumbs-up
icon-thumbs-up-alt
icon-ticket
icon-time
icon-tint
icon-trash
icon-trophy
icon-truck
icon-umbrella
icon-unchecked (alias)
icon-unlock
icon-unlock-alt
icon-upload
icon-upload-alt
icon-user
icon-volume-down
icon-volume-off
icon-volume-up
icon-warning-sign
icon-wrench
icon-zoom-in
icon-zoom-out
icon-bitcoin (alias)
icon-btc
icon-cny
icon-dollar (alias)
icon-eur
icon-euro (alias)
icon-gbp
icon-inr
icon-jpy
icon-krw
icon-renminbi (alias)
icon-rupee (alias)
icon-usd
icon-won (alias)
icon-yen (alias)
icon-align-center
icon-align-justify
icon-align-left
icon-align-right
icon-bold
icon-columns
icon-copy
icon-cut
icon-eraser
icon-file
icon-file-alt
icon-file-text
icon-file-text-alt
icon-font
icon-indent-left
icon-indent-right
icon-italic
icon-link
icon-list
icon-list-alt
icon-list-ol
icon-list-ul
icon-paper-clip
icon-paperclip (alias)
icon-paste
icon-repeat
icon-rotate-left (alias)
icon-rotate-right (alias)
icon-save
icon-strikethrough
icon-table
icon-text-height
icon-text-width
icon-th
icon-th-large
icon-th-list
icon-underline
icon-undo
icon-unlink
icon-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-sign-down
icon-chevron-sign-left
icon-chevron-sign-right
icon-chevron-sign-up
icon-chevron-up
icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-double-angle-down
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up
icon-long-arrow-down
icon-long-arrow-left
icon-long-arrow-right
icon-long-arrow-up
icon-backward
icon-eject
icon-fast-backward
icon-fast-forward
icon-forward
icon-fullscreen
icon-pause
icon-play
icon-play-circle
icon-play-sign
icon-resize-full
icon-resize-small
icon-step-backward
icon-step-forward
icon-stop
icon-youtube-play
  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
icon-adn
icon-android
icon-apple
icon-bitbucket
icon-bitbucket-sign
icon-bitcoin (alias)
icon-btc
icon-css3
icon-dribbble
icon-dropbox
icon-facebook
icon-facebook-sign
icon-flickr
icon-foursquare
icon-github
icon-github-alt
icon-github-sign
icon-gittip
icon-google-plus
icon-google-plus-sign
icon-html5
icon-instagram
icon-linkedin
icon-linkedin-sign
icon-linux
icon-maxcdn
icon-pinterest
icon-pinterest-sign
icon-renren
icon-skype
icon-stackexchange
icon-trello
icon-tumblr
icon-tumblr-sign
icon-twitter
icon-twitter-sign
icon-vk
icon-weibo
icon-windows
icon-xing
icon-xing-sign
icon-youtube
icon-youtube-play
icon-youtube-sign
icon-ambulance
icon-h-sign
icon-hospital
icon-medkit
icon-plus-sign-alt
icon-stethoscope
icon-user-md

The Widgetkit Spotlight allows you to add an overlay to your images which fades or moves in on mouse hover. The overlay can be an image or HTML content. The default magnifier spotlight is a perfect match to be used with a lightbox.


Examples

If no custom overlay is set the default spotlight fades in an overlay with an magnifier image. If you define a custom overlay you can choose between different animations - fade, bottom, top, right and left.


Features

  • Create nicely animated image overlays
  • Supports custom image or HTML content overlays
  • 5 different animation modes
  • Responsive design to fit all device resolutions
  • Built with the latest jQuery version
  • Works with Joomla and WordPress

How To Use

Use the HTML5 custom data attribute data-spotlight to activate the spotlight.

<a data-spotlight="on" href="/mypage.html">
	<img src="/image.jpg" width="180" height="120" alt="" />
</a>

To create a custom overlay use a div element with the CSS class overlay. You can set the effect parameter to the data attribute. For example:

<a data-spotlight="effect:bottom;" href="/mypage.html">
	<img src="/image.jpg" width="180" height="120" alt="" />
	<span class="overlay">Custom Overlay</span>
</a>

You can set the effect parameter to fade, bottom, top, right and left.

The Widgetkit Lightbox allows you to view images, HTML and multi-media content on a dark dimmed overlay without having to leave the current page.


Examples

Different animations - fade, elastic and none

Different title positions - float, inside and over

Various examples in one gallery (try also using the keyboard and mouse scroll wheel)


Features

  • Display images, videos, HTML, Iframes, Ajax requests and SWF
  • Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies
  • Group lightboxes and mix different content types
  • Responsive design to fit all device resolutions
  • Load other widgets in lightbox
  • 3 different opening and closing transitions
  • 4 different caption styles
  • Keyboard and mouse scroll wheel navigation
  • Build on the latest jQuery version
  • Works with Joomla and WordPress

Load Widgets In A Lightbox

Use #wk-ID to load widgets like slideshows or galleries in a lightbox. For example: Widgetkit Slideshow

<a data-lightbox="width:600;height:300;" href="#wk-10">Lightbox</a>

How To Use

Use the HTML5 custom data attribute data-lightbox to activate the lightbox. You can set various lightbox parameters to the data attribute. For example:

<a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org">Lightbox</a>

Here is a list of the most common parameters:

  • titlePosition - How should the title show up? (float, outside, inside or over)
  • transitionIn - Set a opening transition. (fade, elastic, or none)
  • transitionOut - Set a closing transition (fade, elastic, or none)
  • overlayShow - Set to true or false
  • scrolling - Set to yes or no
  • width - Set a width in pixel
  • height - Set a height in pixel
  • padding - Set a padding in pixel

The Widgetkit Media Player is a HTML5 audio and video player completely built HTML and CSS. You can easily embed video files into your website by using the HTML5 video element. A Flash player fallback is included for all unsupported browsers.


Examples


This is a MP3 Audio Sample:


Features

  • Native playback for modern HTML5 browsers
  • Supports MP4 (h.264), WebM, FLV, WMV and MP3 files
  • Completely built with HTML and CSS
  • Responsive design to fit all device resolutions
  • Same UI in all browsers
  • Create your own skins
  • Flash player fallback for unsupported browsers
  • Works with Joomla and WordPress

How To Use

Use the HTML5 video element to embed video in your website. For example:

<video src="/video.mp4" width="320" height="240"></video>

You can also provide multiple sources, to add support for the different video formats like h.264, WebM or Ogg:

<video width="320" height="240">
	<source type="video/mp4"  src="/video.mp4" />
	<source type="video/webm" src="/video.webm" />
	<source type="video/ogg"  src="/video.ogv" />
</video>

Use the HTML5 audio element to embed MP3 files in your website. For example:

<audio src="/audio.mp3" type="audio/mp3"></audio>