Shopp includes it’s own set of commerce-centric icons that you can easily make use of in your page layouts.

Shopp Icons Reference Guide

shopp-icons

Shopp Icons Reference Guide

 shoppui-shopp-logo  shoppui-shopp-tag  shoppui-th-large  shoppui-th-list  shoppui-tag  shoppui-lock  shoppui-unlock-alt  shoppui-plus  shoppui-minus  shoppui-remove  shoppui-ok  shoppui-exclamation  shoppui-info  shoppui-pause  shoppui-play  shoppui-play-sign  shoppui-plus-sign  shoppui-minus-sign  shoppui-remove-sign  shoppui-ok-sign  shoppui-question-sign  shoppui-exclamation-sign  shoppui-info-sign  shoppui-warning-sign  shoppui-star-empty  shoppui-star  shoppui-star-half-full  shoppui-star-half  shoppui-spinner  shoppui-repeat  shoppui-refresh  shoppui-move  shoppui-reply  shoppui-share-alt  shoppui-flag  shoppui-map-marker  shoppui-chevron-left  shoppui-chevron-right  shoppui-arrow-left  shoppui-arrow-right  shoppui-circle-arrow-left  shoppui-circle-arrow-right  shoppui-chevron-sign-left  shoppui-chevron-sign-right  shoppui-sort  shoppui-caret-up  shoppui-caret-down  shoppui-caret-left  shoppui-caret-right  shoppui-ok-circle  shoppui-upload  shoppui-download  shoppui-remove-circle  shoppui-question  shoppui-notification  shoppui-info-2  shoppui-warning  shoppui-file  shoppui-file-zip  shoppui-file-pdf  shoppui-file-word  shoppui-file-excel  shoppui-file-powerpoint  shoppui-file-xml  shoppui-music  shoppui-film  shoppui-picture  shoppui-link  shoppui-unlink  shoppui-sort-by-attributes  shoppui-sort-by-attributes-alt  shoppui-step-top  shoppui-step-bottom  shoppui-upload-alt  shoppui-download-alt  shoppui-shopping-cart  shoppui-archive  shoppui-cloud  shoppui-user  shoppui-users  shoppui-comment  shoppui-comments  shoppui-comments-alt  shoppui-envelope-alt  shoppui-envelope  shoppui-phone  shoppui-print  shoppui-crop  shoppui-cog  shoppui-search  shoppui-ban-circle  shoppui-truck  shoppui-globe  shoppui-support  shoppui-bug  shoppui-ticket  shoppui-question-2  shoppui-calendar  shoppui-heart  shoppui-barcode  shoppui-credit  shoppui-money  shoppui-bitcoin  shoppui-wordpress  shoppui-rss  shoppui-rss-sign  shoppui-skype  shoppui-facebook  shoppui-facebook-sign  shoppui-twitter  shoppui-twitter-sign  shoppui-google-plus  shoppui-google-plus-sign  shoppui-linkedin  shoppui-linkedin-sign  shoppui-github  shoppui-github-sign  shoppui-pinterest  shoppui-pinterest-sign

Shopp icons are embedded in a custom web font and stylesheet that is automatically loaded with your storefront (the public-facing front-end website pages) and in the WordPress admin in Shopp-related screens.

To use them, you simply setup an HTML element that includes the class name of the icon you want to use. The cheatsheet above can be used as a reference for the icon you want to display.

For example:

<span class="shoppui-shopp-tag"></span>

The icons are already sized to work in inline contexts. You may want to use CSS to boost the font-size to change the size of the icons in some cases.

You can also call the icons with CSS.

Add your custom CSS to your theme’s style.css file:

div.shopp-tag-icon:before { 
    content:"\e001";
    display: inline-block;
    color: #1EC9B3;
    -webkit-font-smoothing: antialiased;
    font: normal 150px/1 'shopp-icons';
}

Feel free to modify the CSS to style it to your exact needs and preferences. If you want to change the icon to something else, look up the code and change the content:"\e001"; to the code for the icon you want. You can find the content value you need mapped to the icon by referring to the icons.css file found in your Shopp install under shopp/core/ui/styles/icons.css.

Icons are a great way to dress up your website with resolution independent graphics that look great on normal and high-definition displays without the fuzzies of raster artwork in PNGs or JPEGs, or the tedious 2X work.

Avatar of Jonathan Davis

By

Jonathan was born at an early age and began designing and developing shortly after. He is the founder of Ingenesis Limited and Project Lead on the Shopp e-commerce plugin for WordPress. He lives and works in the heart of the midwest US with his family. He fancies himself a designer of code, and is only slightly addicted to coffee.

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.

Skip to toolbar