CSS play - CSS icons using Font Awesome

9th April 2014

For all the latest 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 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

with border

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


comment magnet chevron chevron-down retweet shopping-cart folder folder-open arrows-v arrows-h bar-chart 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 trophy github-square upload lemon-o phone square-o bookmark-o phone-square

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

Home Sweet Home

hover effect

Delivery Information

special 12 point star


copyright © stu nicholls - CSS play


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


You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page