zachharkey
3/19/2014 - 7:53 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

<div class="payment-methods">
  <span class="pay pay--2co"></span>
  <span class="pay pay--ach"></span>
  <span class="pay pay--american-express"></span>
  <span class="pay pay--cirrus"></span>
  <span class="pay pay--delta"></span>
  <span class="pay pay--diners-club"></span>
  <span class="pay pay--direct-debit"></span>
  <span class="pay pay--discover"></span>
  <span class="pay pay--jcb"></span>
  <span class="pay pay--maestro"></span>
  <span class="pay pay--mastercard"></span>
  <span class="pay pay--moneybookers"></span>
  <span class="pay pay--paypal"></span>
  <span class="pay pay--solo"></span>
  <span class="pay pay--switch"></span>
  <span class="pay pay--visa"></span>
  <span class="pay pay--visa-electron"></span>
  <span class="pay pay--western-union"></span>
</div>
payment-methods {
  text-align: center; }

.pay {
  text-align: center;
  display: inline-block;
  width: 64px;
  height: 64px;
  margin: 0.5em;
  display: inline-block;
  background-color: rgba(0, 255, 255, 0.1);
  outline: 1px solid rgba(0, 255, 255, 0.3); }

.pay--2co {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/2co-64.png'); }

.pay--ach {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/ach-64.png'); }

.pay--american-express {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/american-express-64.png'); }

.pay--cirrus {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/cirrus-64.png'); }

.pay--delta {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/delta-64.png'); }

.pay--diners-club {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/diners-club-64.png'); }

.pay--direct-debit {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/direct-debit-64.png'); }

.pay--discover {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/discover-64.png'); }

.pay--jcb {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/jcb-64.png'); }

.pay--maestro {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/maestro-64.png'); }

.pay--mastercard {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/mastercard-64.png'); }

.pay--moneybookers {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/moneybookers-64.png'); }

.pay--paypal {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/paypal-64.png'); }

.pay--solo {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/solo-64.png'); }

.pay--switch {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/switch-64.png'); }

.pay--visa {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-64.png'); }

.pay--visa-electron {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-electron-64.png'); }

.pay--western-union {
  background-image: url('../images/lovicons-payment-card-glyphs/64x64/western-union-64.png'); }
// ----
// libsass (v0.7.0)
// ----

payment-methods {
  text-align: center;
}
.pay {
  text-align: center;
  display: inline-block;
  width: 64px; height: 64px;
  margin: .5em;
  display: inline-block;
  background-color: rgba(0,255,255,.1); outline: 1px solid rgba(0,255,255,.3);

}
.pay--2co { background-image: url('../images/lovicons-payment-card-glyphs/64x64/2co-64.png'); }
.pay--ach { background-image: url('../images/lovicons-payment-card-glyphs/64x64/ach-64.png'); }
.pay--american-express { background-image: url('../images/lovicons-payment-card-glyphs/64x64/american-express-64.png'); }
.pay--cirrus { background-image: url('../images/lovicons-payment-card-glyphs/64x64/cirrus-64.png'); }
.pay--delta { background-image: url('../images/lovicons-payment-card-glyphs/64x64/delta-64.png'); }
.pay--diners-club { background-image: url('../images/lovicons-payment-card-glyphs/64x64/diners-club-64.png'); }
.pay--direct-debit { background-image: url('../images/lovicons-payment-card-glyphs/64x64/direct-debit-64.png'); }
.pay--discover { background-image: url('../images/lovicons-payment-card-glyphs/64x64/discover-64.png'); }
.pay--jcb { background-image: url('../images/lovicons-payment-card-glyphs/64x64/jcb-64.png'); }
.pay--maestro { background-image: url('../images/lovicons-payment-card-glyphs/64x64/maestro-64.png'); }
.pay--mastercard { background-image: url('../images/lovicons-payment-card-glyphs/64x64/mastercard-64.png'); }
.pay--moneybookers { background-image: url('../images/lovicons-payment-card-glyphs/64x64/moneybookers-64.png'); }
.pay--paypal { background-image: url('../images/lovicons-payment-card-glyphs/64x64/paypal-64.png'); }
.pay--solo { background-image: url('../images/lovicons-payment-card-glyphs/64x64/solo-64.png'); }
.pay--switch { background-image: url('../images/lovicons-payment-card-glyphs/64x64/switch-64.png'); }
.pay--visa { background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-64.png'); }
.pay--visa-electron { background-image: url('../images/lovicons-payment-card-glyphs/64x64/visa-electron-64.png'); }
.pay--western-union { background-image: url('../images/lovicons-payment-card-glyphs/64x64/western-union-64.png'); }
<div class="payment-methods">
  <span class="pay pay--2co"></span>
  <span class="pay pay--ach"></span>
  <span class="pay pay--american-express"></span>
  <span class="pay pay--cirrus"></span>
  <span class="pay pay--delta"></span>
  <span class="pay pay--diners-club"></span>
  <span class="pay pay--direct-debit"></span>
  <span class="pay pay--discover"></span>
  <span class="pay pay--jcb"></span>
  <span class="pay pay--maestro"></span>
  <span class="pay pay--mastercard"></span>
  <span class="pay pay--moneybookers"></span>
  <span class="pay pay--paypal"></span>
  <span class="pay pay--solo"></span>
  <span class="pay pay--switch"></span>
  <span class="pay pay--visa"></span>
  <span class="pay pay--visa-electron"></span>
  <span class="pay pay--western-union"></span>
</div>