CSSPLAY

CSS DEMOS › CSS icons using Font Awesome

Date : 9th April 2014

For all modern browsers

very small / plain / square / colored icon / no text

glass music search enveope-o heart

small / colored background / border-radius / no text

star star-o user film th-large

medium / colored background with fade / border-radius / no text

th th-list check times search-plus

large / colored background with gloss / border-radius / no text

search-minus power-off signal cog trash-o

very large / colored background with gloss / border-radius / no text

home file-o clock-o road download

circle plain

arrow-circle-o-down arrow-circle-o-up inbox play-circle-o repeat refresh list-alt lock flag headphones volume-off volume-down volume-up qrcode barcode tag tags book bookmark print

circle fade

camera font bold italic text-height text-width align-left align-center align-right align-justify list outdent indent video-camera picture-o pencil map-marker adjust

circle gloss icon colored

tint pencil-square-o share-square-o check-square-o arrows step-backward fast-backward backward play pause stop forward fast-forward step-forward eject chevron-left chevron-right

circle gloss background colored

plus-circle minus-circle times-circle check-circle question-circle info-circle crosshairs times-circle-o check-circle-o ban arrow-left arrow-right arrow-up arrow-down share

with border

expand compress plus minus asterisk exclamation-circle gift leaf fire eye eye-slash exclamation-triangle plane calendar randow

general

comment magnet chevron chevron-down retweet shopping-cart folder folder-open arrows-v arrows-h bar-chart twitter-square facebook-square camera-retro key cogs comments thumbs-o-up

icon indent

thumbs-o-down star-half heart-o sign-out linkedin-square thumb-tack external-link sign-in trophy github-square upload lemon-o phone square-o bookmark-o phone-square twitter facebook

github unlock credit-card rss hdd-o bullhorn bell certificate hand-o-right hand-o-left hand-o-up hand-o-down arrow-circle-left arrow-circle-right arrow-circle-up arrow-circle-down globe wrench

tasks filter briefcase arrows-alt users link cloud flask scissors files-o paperclip floppy-o square bars list-ul list-ol strikethrough underline

table magic truck pinterest pinterest-square google-plus-square google-plus money caret-down caret-up caret-left caret-right columns sort sort-asc sort-desc envelope linkedin

undo gavel tachometer comment-o comments-o bolt sitemap umbrella clipboard lightbulb-o exchange cloud-download cloud-upload user-md stethoscope suitcase bell-o coffee

cutlery file-text building-o hospital-o ambulance medkit fighter-jet beer h-square plus-square angle-double-left angle-double-right angle-double-up angle-double-down angle-left angle-right angle-up angle-down

desktop laptop tablet mobile circle-o quote-left quote-right spinner circle reply github-alt folder-o folder-open-o smile-o frown-o meh-o gamepad keyboard-o

flag-o flag-checkered terminal code replay-all star-half-o location-arrow crop code-fork chain-broken question info exclamation superscript subscript eraser puzzle-piece microphone

microphone-slash shield calendar fire-extinguisher rocket maxcdn chevron-circle-left chevron-circle-right chevron-circle-up chevron-circle-down html5 css3 anchor unlock bullseye ellipsis-h ellipsis-v rss-square

play-circle ticket minus-square minus-square-o level-up level-down check-square pencil-square external-link-square share-square compass caret-square-o-down caret-square-o-up caret-square-o-right eur gbp usd inr

jpy rub krw btc file file-text sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-numeric-asc sort-numeric-desc thumbs-up thumbs-down youtube-square youtube xing xing-square

youtube-play dropbox stack-overflow instagram flickr adn bittbucket bittbucket-square tumblr tumblr-square long-arrow-down long-arrow-up long-arrow-left long-arrow-right apple windows android linux

dribble skype foursquare trello female male gittip sun-o moon-o archive bug vk weibo

radial fade

renren pagelines stack-exchange arrow-circle-o-right arrow-circle-o-left

radial glossy

caret-square-o-left dot-circle-o wheelchair vimeo-square try plus-square-o

with text

twitter facebook Home Sweet Home

hover effect

Delivery Information

special 12 point star

twitter

Information

A method of CSS styling font icons from Font Awesome to produce multiple icon types, from simple square plain graphics to complex glossy circles with various background, foreground and border colors.

The options are endless and you can add your own colors, shapes, sizes etc. etc..

Download the demo CSSplay Awesome Icons

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.