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

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="350px" height="50px" viewBox="0 0 350 50" style="enable-background:new 0 0 350 50;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#3A3A3C;}
</style>
<g>
	<path class="st0" d="M26.9,37.5V26h3.8l0.6-4.4h-4.4v-2.8c0-1.3,0.4-2.1,2.2-2.1h2.4v-4c-0.4-0.1-1.8-0.1-3.4-0.1
		c-3.4,0-5.7,2.1-5.7,5.9v3.3h-3.8v4.4h3.8v11.4L26.9,37.5L26.9,37.5z"/>
</g>
<g>
	<path class="st0" d="M59.8,34.7c0,0-0.2,0,1.1,0.9s4.8,2,8.3,2c11.6,0,17.9-9.6,17.9-17.9c0-0.2,0-0.5,0-0.7c0,0,0-0.1,0.6-0.6
		s1.7-1.6,2.6-2.8c-1.1,0.5-2.3,0.9-3.7,1c1.3-0.7,2.3-2.1,2.8-3.5c-1.2,0.7-2.6,1.2-4,1.6c-1.1-1.2-2.8-2-4.6-2
		c-3.5,0-6.3,2.8-6.3,6.3c0,0.5,0,1,0.1,1.5c-5.2-0.2-9.9-2.8-12.9-6.6c-0.5,1-0.9,2-0.9,3.2c0,2.2,1.1,4.1,2.8,5.2
		c-1,0-2-0.4-2.8-0.7l0,0c0,3,2.2,5.6,3.7,5.9c0,0,1.5,0.2,1.2,0.4C65.5,28,64.8,28,64.4,28s-0.9,0-1-0.1c0,0-0.2,0,0.2,1.2
		s2.7,3,4.1,3c0,0,1.3,0,0.2,0.9c-1.3,1.1-4,2.1-7,2.1C60.5,34.8,60,34.8,59.8,34.7"/>
</g>
<g>
	<path class="st0" d="M105.3,24.4c0.1-6.5,6-12.1,12.5-11.9c3.1-0.1,6,1.2,8.4,3.1c-1,1.2-2.1,2.2-3.1,3.3c-2.9-2-6.9-2.5-9.8-0.3
		c-4,2.9-4.3,9.5-0.4,12.5c3.8,3.5,11.1,1.7,12.1-3.5c-2.4,0-4.8,0-7.2-0.1c0-1.4,0-2.9,0-4.3c4,0,8,0,12,0c0.3,3.4-0.3,6.9-2.2,9.7
		c-3.1,4.4-9.4,5.6-14.2,3.8C108.4,34.8,104.9,29.7,105.3,24.4"/>
	<path class="st0" d="M137.7,19.7h3.5c0,1.2,0,2.4,0,3.5c1.2,0,2.4,0,3.5,0v3.5c-1.2,0-2.4,0-3.5,0c0,1.2,0,2.4,0,3.5h-3.5
		c0-1.2,0-2.4,0-3.5c-1.2,0-2.4,0-3.5,0v-3.5c1.2,0,2.4,0,3.5,0C137.7,22,137.7,20.9,137.7,19.7"/>
</g>
<path class="st0" d="M242.4,17.9c0,0-0.4-2.5-1.4-3.5c-1.3-1.4-2.8-1.4-3.5-1.6c-4.9-0.4-12.4-0.4-12.4-0.4s-7.4,0-12.4,0.4
	c-0.6,0.1-2.2,0.1-3.5,1.6c-1,1-1.4,3.5-1.4,3.5s-0.4,2.8-0.4,5.7v2.7c0,2.8,0.4,5.7,0.4,5.7s0.4,2.5,1.4,3.5
	c1.3,1.4,3.1,1.3,3.9,1.6c2.8,0.3,12,0.4,12,0.4s7.4,0,12.4-0.4c0.6-0.1,2.2-0.1,3.5-1.6c1-1,1.4-3.5,1.4-3.5s0.4-2.8,0.4-5.7v-2.6
	C242.7,20.8,242.4,17.9,242.4,17.9z M221.4,29.7v-10l9.6,4.9L221.4,29.7z"/>
<g>
	<path class="st0" d="M275,12.5c-6.8,0-12.4,5.6-12.4,12.4c0,5.1,3,9.4,7.4,11.3c-0.1-0.9,0-2,0.2-2.8c0.3-1,1.6-6.7,1.6-6.7
		s-0.4-0.8-0.4-2c0-1.9,1.1-3.2,2.4-3.2c1.2,0,1.7,0.9,1.7,1.9c0,1.2-0.7,2.8-1.2,4.4c-0.4,1.3,0.7,2.4,2,2.4c2.4,0,3.9-3,3.9-6.6
		c0-2.7-1.9-4.8-5.1-4.8c-3.8,0-6.1,2.8-6.1,5.9c0,1.1,0.4,1.9,0.8,2.4c0.3,0.3,0.3,0.4,0.2,0.7c-0.1,0.3-0.2,0.8-0.3,1
		c-0.1,0.4-0.4,0.4-0.6,0.4c-1.8-0.7-2.6-2.6-2.6-4.7c0-3.5,3-7.8,8.9-7.8c4.7,0,7.9,3.5,7.9,7.2c0,4.9-2.7,8.5-6.7,8.5
		c-1.3,0-2.6-0.7-3-1.6c0,0-0.7,2.8-0.9,3.5c-0.3,1-0.8,2-1.2,2.7c1.2,0.4,2.3,0.5,3.5,0.5c6.8,0,12.4-5.6,12.4-12.4
		C287.5,18.1,281.9,12.5,275,12.5z"/>
</g>
<g>
	<path class="st0" d="M325,14.7c3.3,0,3.7,0,5.1,0.1c1.2,0.1,1.9,0.3,2.3,0.4c0.6,0.3,1,0.5,1.5,0.9c0.4,0.4,0.7,0.9,0.9,1.5
		c0.2,0.4,0.3,1.1,0.4,2.3c0.1,1.3,0.1,1.7,0.1,5.1s0,3.7-0.1,5.1c-0.1,1.2-0.3,1.9-0.4,2.3c-0.3,0.6-0.5,1-0.9,1.5
		c-0.4,0.4-0.9,0.7-1.5,0.9c-0.4,0.2-1.1,0.3-2.3,0.4c-1.3,0.1-1.7,0.1-5.1,0.1s-3.7,0-5.1-0.1c-1.2-0.1-1.9-0.3-2.3-0.4
		c-0.6-0.3-1-0.5-1.5-0.9c-0.4-0.4-0.7-0.9-0.9-1.5c-0.2-0.4-0.3-1.1-0.4-2.3c-0.1-1.3-0.1-1.7-0.1-5.1s0-3.7,0.1-5.1
		c0.1-1.2,0.3-1.9,0.4-2.3c0.3-0.6,0.5-1,0.9-1.5c0.4-0.4,0.9-0.7,1.5-0.9c0.4-0.2,1.1-0.3,2.3-0.4C321.2,14.7,321.6,14.7,325,14.7
		 M325,12.5c-3.4,0-3.8,0-5.1,0.1c-1.3,0.1-2.2,0.3-3.1,0.6c-0.8,0.3-1.5,0.8-2.1,1.5c-0.7,0.7-1.1,1.4-1.5,2.1
		c-0.3,0.8-0.5,1.7-0.6,3.1s-0.1,1.8-0.1,5.2s0,3.8,0.1,5.1s0.3,2.2,0.6,3.1c0.3,0.9,0.8,1.5,1.5,2.1c0.7,0.7,1.4,1.1,2.1,1.5
		c0.8,0.3,1.7,0.5,3.1,0.6c1.3,0.1,1.7,0.1,5.1,0.1s3.8,0,5.1-0.1c1.3-0.1,2.2-0.3,3.1-0.6c0.8-0.3,1.5-0.8,2.1-1.5
		c0.7-0.7,1.1-1.4,1.5-2.1c0.3-0.8,0.5-1.7,0.6-3.1c0.1-1.3,0.1-1.7,0.1-5.1s0-3.8-0.1-5.1c-0.1-1.3-0.3-2.2-0.6-3.1
		c-0.3-0.8-0.8-1.5-1.5-2.1s-1.4-1.1-2.1-1.5c-0.8-0.3-1.7-0.5-3.1-0.6C328.8,12.5,328.4,12.5,325,12.5L325,12.5z"/>
	<path class="st0" d="M325,18.6c-3.5,0-6.4,2.8-6.4,6.4s2.8,6.4,6.4,6.4s6.4-2.8,6.4-6.4S328.5,18.6,325,18.6z M325,29.2
		c-2.3,0-4.2-1.9-4.2-4.2s1.9-4.2,4.2-4.2s4.2,1.9,4.2,4.2C329.1,27.3,327.3,29.2,325,29.2z"/>
	<circle class="st0" cx="331.6" cy="18.3" r="1.5"/>
</g>
<g>
	<path class="st0" d="M181.3,20.4c-2.5,0-4.2,1.4-4.9,2.7h-0.1v-2.3h-5v16.7h5.2v-8.3c0-2.2,0.4-4.3,3.1-4.3c2.7,0,2.7,2.5,2.7,4.4
		v8.1h5.2v-9.2C187.5,23.8,186.6,20.4,181.3,20.4z"/>
	<circle class="st0" cx="165.5" cy="15.5" r="3"/>
	<rect x="162.9" y="20.8" class="st0" width="5.2" height="16.7"/>
</g>
</svg>