Social media svg sprite for use with WordPress and advanced custom fields plugin options page

social-media-sprite.php

<?php if( function_exists( 'acf_add_options_page' ) ) :
  $fb   = get_field( 'facebook_url', 'social' );
  $pin  = get_field( 'pinterest_url', 'social' );
  $tw   = get_field( 'twitter_url', 'social' );
  $inst = get_field( 'instagram_url', 'social' );
  $yt   = get_field( 'youtube_url', 'social' );
  $goo  = get_field( 'google_plus_url', 'social' );
  $link = get_field( 'linkedin_url', 'social' );

  if( $fb || $pin || $tw || $insta || $yt || $goo || $link ) : ?>

  <ul class="social-media">

    <? if ( $fb ): ?>
      <li class="fb">
        <a href="<?php echo wp_kses_post( $fb ); ?>" target="_blank">Find Us On Facebook</a>
      </li>
    <?php endif; ?>

    <? if ( $link ): ?>
      <li class="linked">
        <a href="<?php echo wp_kses_post( $link ); ?>" target="_blank">Find Us On LinkedIn</a>
      </li>
    <?php endif; ?>

    <? if ( $tw ): ?>
      <li class="tw">
        <a href="<?php echo wp_kses_post( $tw ); ?>" target="_blank">Follow Us On Twitter</a>
      </li>
    <?php endif; ?>

    <? if ( $pin ): ?>
      <li class="pin">
        <a href="<?php echo wp_kses_post( $pin ); ?>" target="_blank">Find Us On Pinterest</a>
      </li>
    <?php endif; ?>

    <? if ( $inst ): ?>
      <li class="insta">
        <a href="<?php echo wp_kses_post( $inst ); ?>" target="_blank">Find Us On Instagram</a>
      </li>
    <?php endif; ?>

    <? if ( $yt ): ?>
      <li class="yt">
        <a href="<?php echo wp_kses_post( $yt ); ?>" target="_blank">Watch Us On YouTube</a>
      </li>
    <?php endif; ?>

    <? if ( $goo ): ?>
      <li class="goo">
        <a href="<?php echo wp_kses_post( $goo ); ?>" target="_blank">Find Us On Google+</a>
      </li>
    <?php endif; ?>

  </ul>

  <?php endif; ?>

<?php endif; ?>

social-media-sprite.scss

.social-media {
	list-style: none;
	margin: 0 0 1.5em;
	display: flex;
	justify-content: center;

	a {
		display: block;
		text-indent: 110%;
		white-space: nowrap;
		overflow: hidden;
		width: 35px;
		height: 35px;
		background-image: url(imgs/sprite-social-media-icons.svg);
		background-size: auto 100%;
		background-repeat: no-repeat;
	}

	.fb {
		a {
			background-position: -4px 0;
			width: 27px;
		}
	}

	.tw {
		a {
			background-position: -34px 0;
		}
	}

	.goo {
		a {
			background-position: -68px 0;
			width: 40px;
		}
	}

	.linked {
		a {
			background-position: -108px 0;
			width: 30px;
		}
	}

	.yt {
		a {
			background-position: -140px 0;
			width: 40px;
		}
	}

	.pin {
		a {
			width: 27px;
			background-position: -179px 0;
		}
	}

	.insta {
		a {
			background-position: -210px 0;
		}
	}

	@include respond-to(large) {
		a {
			width: 50px;
			height: 50px;
		}

		.fb {
			a {
				background-position: -10px 0;
				width: 32px;
			}
		}

		.tw {
			a {
				background-position: -50px 0;
			}
		}

		.goo {
			a {
				background-position: -97px 0;
				width: 55px;
			}
		}

		.linked {
			a {
				background-position: -155px 0;
				width: 40px;
			}
		}

		.yt {
			a {
				background-position: -201px 0;
				width: 49px;
			}
		}

		.pin {
			a {
				width: 42px;
				background-position: -255px 0;
			}
		}

		.insta {
			a {
				background-position: -305px 0;
				width: 40px;
			}
		}
	}
}

sprite-social-media-icons.svg