Social Media Links

social-media.php

<?php 
// Social Media Links
if ( have_rows( 'social_media', 'options' ) ) : ?>

	<ul class="list-style--social">

		<?php while ( have_rows( 'social_media', 'options' ) ) : the_row(); ?>

			<?php
				// Variables
				$icon = get_sub_field( 'icon' );
				$label = $icon['label'];
				$value = $icon['value'];
				$link = get_sub_field( 'url' );
			?>

			<?php // Check if we have a url
			if ( $link ) : ?>

				<li><a class="icon-<?php echo $value; ?>" href="<?php echo esc_url( $link ); ?>" title="<?php echo sprintf( __( '%1$s %2$s', 'scaffolding' ), esc_attr( get_bloginfo( 'name', 'display' ) ), esc_attr( $label ) ); ?>" target="_blank"><i class="fa fa-<?php echo $value; ?>"></i></a></li>

			<?php endif; ?>

		<?php endwhile; ?>

	</ul>

<?php endif; ?>

social-media.scss

ul.list-style--social {
	margin: 0 -3px;
	padding: 0;
	list-style: none;
	
	li {
		display: inline-block;
		margin: 3px;
		padding: 0;
		
		a {
			display: block;
			color: #FFF;
			background: #FFF;
			font-size: 1.5em;
			display: block;
			text-align: center;
			text-decoration: none;
			padding: 5px;
			width: 2em;
			line-height: 1.5em;
			@include transition(all 0.25s ease-in-out);
		}
		
		.icon-facebook {
			background-color: $color__facebook;
			
			&:hover,
			&:focus {
				background-color: darken($color__facebook, 10%);
			}
		}
		
		.icon-twitter {
			background-color: $color__twitter;
			
			&:hover,
			&:focus {
				background-color: darken($color__twitter, 10%);
			}
		}
		
		.icon-linkedin {
			background-color: $color__linkedin;
			
			&:hover,
			&:focus {
				background-color: darken($color__linkedin, 10%);
			}
		}
		
		.icon-google-plus {
			background-color: $color__google-plus;
			
			&:hover,
			&:focus {
				background-color: darken($color__google-plus, 10%);
			}
		}
		
		.icon-youtube {
			background-color: $color__youtube;
			
			&:hover,
			&:focus {
				background-color: darken($color__youtube, 10%);
			}
		}
		
		.icon-instagram {
			background-color: $color__instagram;
			
			&:hover,
			&:focus {
				background-color: darken($color__instagram, 10%);
			}
		}
	}
}