// Hides html text and replaces it with an image.
// If you use this on an inline element, you will need to change the display to block or inline-block.
// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
// @param img
//   the relative path from the project image directory to the image.
// @param x
//   the x position of the background image.
// @param y
//   the y position of the background image.
@mixin replace-text($img, $x: 50%, $y: 50%) {
  @include hide-text;
  background: {
    image: image-url($img);
    repeat: no-repeat;
    position: $x $y; }; }

// Hides text in an element so you can see the background.
@mixin hide-text {
  text-indent: -9999em;
  overflow: hidden;
  text-align: left; }