span.icon, span.glyphicon { vertical-align: text-top; } // Maps Glyphicons to Spree .icon prefix. // You can apply same pattern to extend with more icons. // // example: // glyphicon glyphicon-pencil => icon icon-edit // // All Glyphicons Halflings in Bootstrap v3.3.1.0 $default_icons: ( adjust align-center align-justify align-left align-right arrow-down arrow-left arrow-right arrow-up asterisk backward ban-circle barcode bell bold book bookmark briefcase bullhorn calendar camera certificate check chevron-down chevron-left chevron-right chevron-up circle-arrow-down circle-arrow-left circle-arrow-right circle-arrow-up cloud cloud-download cloud-upload cog collapse-down collapse-up comment compressed copyright-mark credit-card cutlery dashboard download download-alt earphone eject envelope euro exclamation-sign expand export eye-close eye-open facetime-video fast-backward fast-forward file film filter fire flag flash floppy-disk floppy-open floppy-remove floppy-save floppy-saved folder-close folder-open font forward fullscreen gbp gift glass globe hand-down hand-left hand-right hand-up hd-video hdd header headphones heart heart-empty home import inbox indent-left indent-right info-sign italic leaf link list list-alt lock log-in log-out magnet map-marker minus minus-sign move music new-window off ok ok-circle ok-sign open paperclip pause pencil phone phone-alt picture plane play play-circle plus plus-sign print pushpin qrcode question-sign random record refresh registration-mark remove remove-circle remove-sign repeat resize-full resize-horizontal resize-small resize-vertical retweet road saved screenshot sd-video search send share share-alt shopping-cart signal sort sort-by-alphabet sort-by-alphabet-alt sort-by-attributes sort-by-attributes-alt sort-by-order sort-by-order-alt sound-5-1 sound-6-1 sound-7-1 sound-dolby sound-stereo star star-empty stats step-backward step-forward stop subtitles tag tags tasks text-height text-width th th-large th-list thumbs-down thumbs-up time tint tower transfer trash tree-conifer tree-deciduous unchecked upload usd user volume-down volume-off volume-up warning-sign wrench zoom-in zoom-out ); // We prefer alias/remap these so its easy to understand which icon to use. // Note: If desired alias exist as default, then remove it from default Array, // or write a smarter @each scope below that can actually override. // ==========> default | alias $alias_icons: (plus add) (pencil edit) (ok capture) (remove void) (bullhorn promotion) (share return) (send shipment) (share clone) (refresh update) (remove cancel) (resize-full split) (ok save) (eye-open show) (remove delete) (minus refund) (th-large products) (th-large variants) (picture images) (tag properties) (inbox stock) (usd money) (globe translate) (ok approve); span.icon { @extend .glyphicon; top:2px; // Map defaults. @each $icon in $default_icons { &.icon-#{$icon} { @extend .glyphicon-#{$icon}; } } // Map and override with aliases. @each $map in $alias_icons { $icon: nth($map, 1); $alias: nth($map, 2); &.icon-#{$alias} { @extend .glyphicon-#{$icon}; } } } // Spree SVG Icon Defaults i.icon { display: inline-block; width: 1rem; height: 1rem; overflow: hidden; vertical-align: middle; background-repeat: no-repeat; background-size: 100%; background-position: center; } // Spree SVG Icons in JS // The icons listed below are used by javascript generated content // If you wish to use an existing SVG icon in javascript generated content // use tags like this -> // Using tags will fall back to legacy glyphicon font based icons i.icon-close, i.icon-cancel, i.icon-delete, i.icon-void { background-image: url(asset-path("backend-cancel.svg")); } i.icon-save { background-image: url(asset-path("backend-save.svg")); } i.icon-add { background-image: url(asset-path("backend-add.svg")); } i.icon-search { background-image: url(asset-path("backend-search.svg")); } i.icon-settings { background-image: url(asset-path("backend-settings.svg")); } i.icon-delete { background-image: url(asset-path("backend-delete.svg")); } i.icon-edit { background-image: url(asset-path("backend-edit.svg")); } i.icon-chevron-down { background-image: url(asset-path("backend-chevron-down.svg")); } i.icon-chevron-left { background-image: url(asset-path("backend-chevron-left.svg")); } i.icon-chevron-right { background-image: url(asset-path("backend-chevron-right.svg")); } i.icon-chevron-up { background-image: url(asset-path("backend-chevron-up.svg")); }