Button Icon CSS Class Names

The Pinnacle theme incorporates "webfonts" that can be used throughout the theme to create icones. The nice thing about webfonts is that they can easily be resized (just like you would do with a font) and they maintain their crispness.

I have included a few examples of creating buttons with some icons that you can use a sort of a template to help you get going.

<a href="#" class="button grey blue-hover button-120px"><span class="icon-mail"></span>Email Us</a> Email Us
<a href="#" class="button black purple-hover button-140px"><span class="icon-download"></span>Download</a> Download
<a href="#" class="button blue green-hover button-120px"><span class="icon-download-2"></span>Download</a> Download
<a href="#" class="button purple black-hover button-110px"><span class="icon-cart-2"></span>View Cart</a> View Cart
<a href="#" class="button red green-hover button-90px"><span class="icon-plus"></span>More</a> More

Here are all the webfont icons along with their class name.

 icon-home  icon-newspaper  icon-pencil  icon-color-palette  icon-picture  icon-pictures  icon-camera  icon-music  icon-music-2  icon-movie  icon-broadcast  icon-broadcast-2  icon-podcast  icon-broadcast-3  icon-microphone  icon-book  icon-book-2  icon-books  icon-file  icon-tag  icon-tag-2  icon-tag-3  icon-cart  icon-cart-2  icon-cart-add  icon-cart-remove  icon-cart-checkout  icon-basket  icon-basket-2  icon-bag  icon-coin  icon-support  icon-phone  icon-phone-2  icon-address  icon-address-2  icon-mail  icon-mail-2  icon-mail-3  icon-mail-4  icon-location  icon-compass  icon-compass-2  icon-map  icon-map-2  icon-history  icon-clock  icon-clock-2  icon-stopwatch  icon-alarm  icon-calendar  icon-database  icon-undo  icon-redo  icon-flip  icon-flip-2  icon-undo-2  icon-redo-2  icon-forward  icon-reply  icon-reply-2  icon-comments  icon-comments-2  icon-comments-3  icon-comments-4  icon-comments-5  icon-user  icon-users  icon-user-2  icon-user-3  icon-user-4  icon-tie  icon-quote  icon-quote-2  icon-zoom-in  icon-zoom-out  icon-search  icon-locked  icon-unlocked  icon-locked-2  icon-locked-3  icon-balance  icon-bomb  icon-fire  icon-lab  icon-atom  icon-lamp  icon-lamp-2  icon-remove  icon-pin  icon-briefcase  icon-briefcase-2  icon-cloud  icon-cloud-2  icon-cloud-3  icon-download  icon-download-2  icon-download-3  icon-upload  icon-upload-2  icon-upload-3  icon-link  icon-link-2  icon-bookmark  icon-starburst  icon-star  icon-star-2  icon-heart  icon-heart-2  icon-thumbs-up  icon-thumbs-down  icon-thumbs-up-2  icon-thumbs-down-2  icon-people  icon-man  icon-smiley  icon-neutral  icon-sad  icon-shocked  icon-plus  icon-minus  icon-help  icon-blocked  icon-blocked-2  icon-cancel  icon-cancel-2  icon-cancel-3  icon-checkmark  icon-minus-2  icon-plus-2  icon-exit  icon-loop  icon-arrow-up  icon-arrow-right  icon-arrow-down  icon-arrow-left  icon-arrow-up-2  icon-arrow-right-2  icon-arrow-down-2  icon-arrow-left-2  icon-google-plus  icon-google-plus-2  icon-google-plus-3  icon-gplus  icon-facebook  icon-facebook-2  icon-facebook-3  icon-facebook-4  icon-twitter  icon-twitter-2  icon-twitter-3  icon-feed  icon-feed-2  icon-feed-3  icon-youtube  icon-youtube-2  icon-vimeo  icon-vimeo-2  icon-flickr  icon-flickr-2  icon-flickr-3  icon-picassa  icon-picassa-2  icon-dribbble  icon-dribbble-2  icon-dribbble-3  icon-forrst  icon-forrst-2  icon-deviantart  icon-deviantart-2  icon-github  icon-github-2  icon-github-3  icon-github-4  icon-github-5  icon-github-6  icon-git  icon-github-7  icon-wordpress  icon-wordpress-2  icon-blogger  icon-blogger-2  icon-tumblr  icon-tumblr-2  icon-yahoo  icon-yahoo-2  icon-amazon  icon-amazon-2  icon-apple  icon-finder  icon-android  icon-windows  icon-soundcloud  icon-soundcloud-2  icon-skype  icon-reddit  icon-linkedin  icon-lastfm  icon-lastfm-2  icon-delicious  icon-stumbleupon  icon-stumbleupon-2  icon-pinterest  icon-pinterest-2  icon-xing  icon-libreoffice  icon-file-pdf  icon-file-openoffice  icon-file-word  icon-file-excel  icon-file-powerpoint  icon-file-zip  icon-file-xml  icon-file-css  icon-html5  icon-html5-2  icon-css3  icon-chrome  icon-firefox  icon-IE  icon-opera  icon-safari  icon-IcoMoon  icon-plus-3  icon-cancel-4  icon-minus-3  icon-checkmark-2  icon-rss  icon-microphone-2






Because the icons are technically a font … you can use them in any size or any color