/* Font Awesome icon replacement using SVG background images */

.fa {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  font-style: normal;
  /* Inherit color from parent by using mask instead of background-image */
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Hide any text content inside the span */
.fa::before {
  content: none;
}

/* Individual icon mappings */

.icon-comments {
  -webkit-mask-image: url(/assets/images/fa/comments.svg);
  mask-image: url('/assets/images/fa/comments.svg');
}

.icon-fa {
  -webkit-mask-image: url(/assets/images/fa/fa.svg);
  mask-image: url('/assets/images/fa/fa.svg');
}

.icon-password {
  -webkit-mask-image: url(/assets/images/fa/password.svg);
  mask-image: url('/assets/images/fa/password.svg');
}

.icon-shield {
  -webkit-mask-image: url(/assets/images/fa/shield.svg);
  mask-image: url('/assets/images/fa/shield.svg');
}

.icon-username {
  -webkit-mask-image: url(/assets/images/fa/username.svg);
  mask-image: url('/assets/images/fa/username.svg');
}

.icon-tester {
  -webkit-mask-image: url(/assets/images/fa/tester.svg);
  mask-image: url('/assets/images/fa/tester.svg');
}

.icon-grid {
  -webkit-mask-image: url(/assets/images/fa/grid.svg);
  mask-image: url('/assets/images/fa/grid.svg');
}

.icon-showcase {
  -webkit-mask-image: url(/assets/images/fa/showcase.svg);
  mask-image: url('/assets/images/fa/showcase.svg');
}

.icon-minus {
  -webkit-mask-image: url(/assets/images/fa/minus.svg);
  mask-image: url('/assets/images/fa/minus.svg');
}

.icon-x {
  -webkit-mask-image: url(/assets/images/fa/x.svg);
  mask-image: url('/assets/images/fa/x.svg');
}

.icon-restore {
  -webkit-mask-image: url(/assets/images/fa/restore.svg);
  mask-image: url('/assets/images/fa/restore.svg');
}

.icon-bricks {
  -webkit-mask-image: url(/assets/images/fa/bricks.svg);
  mask-image: url('/assets/images/fa/bricks.svg');
}

.icon-thumbsup {
  -webkit-mask-image: url(/assets/images/fa/thumbsup.svg);
  mask-image: url('/assets/images/fa/thumbsup.svg');
}

.icon-thumbsdown {
  -webkit-mask-image: url(/assets/images/fa/thumbsdown.svg);
  mask-image: url('/assets/images/fa/thumbsdown.svg');
}

.icon-verified {
  -webkit-mask-image: url(/assets/images/fa/verified.svg);
  mask-image: url('/assets/images/fa/verified.svg');
}

.icon-bux {
  -webkit-mask-image: url(/assets/images/fa/bux.svg);
  mask-image: url('/assets/images/fa/bux.svg');
}

.icon-creator {
  -webkit-mask-image: url(/assets/images/fa/creator.svg);
  mask-image: url('/assets/images/fa/creator.svg');
}

.icon-cart {
  -webkit-mask-image: url(/assets/images/fa/cart.svg);
  mask-image: url('/assets/images/fa/cart.svg');
}

.icon-checkout {
  -webkit-mask-image: url(/assets/images/fa/checkout.svg);
  mask-image: url('/assets/images/fa/checkout.svg');
}

.icon-addtocart {
  -webkit-mask-image: url(/assets/images/fa/addtocart.svg);
  mask-image: url('/assets/images/fa/addtocart.svg');
}

.icon-people {
  -webkit-mask-image: url(/assets/images/fa/people.svg);
  mask-image: url('/assets/images/fa/people.svg');
}