DLS Social Icons

dls-social-icons.html

<section id="social-icons" class="row section">
  <div class="large-12 columns">
    <h1>Social Icons</h1>
  </div>
  <span class="gist"><a class="icon icon-ajmn-embed" href="https://gist.github.com/capitalJT/e155be7a18531079ba4a" target="_blank"></a></span>
  <hr>
	<div class="large-12 columns">
		<ul class="social">
			<li><a href="#"><span class="icon icon-ajmn-facebook"></span></a></li>
			<li><a href="#"><span class="icon icon-ajmn-twitter"></span></a></li>
			<li><a href="#"><span class="icon icon-ajmn-google-plus"></span></a></li>
			<li><a href="#"><span class="icon icon-ajmn-instagram"></span></a></li>
			<li><a href="#"><span class="icon icon-ajmn-linkedin"></span></a></li>
			<li><a href="#"><span class="icon icon-ajmn-youtube"></span></a></li>
			<li><a href="#"><span class="icon icon-ajmn-reddit"></span></a></li>
			<li><a href="#"><span class="icon icon-ajmn-soundcloud"></span></a></li>
			<li><a href="#"><span class="icon icon-ajmn-tumblr"></span></a></li>
		</ul>
  </div>
</section>

dls-social-icons.scss

.social{
	li{
		list-style-type: none;
		display: inline-block;
		@extend %transition;
		margin-bottom: 5px;
	}
	a{
		color:$onyx;
		display: inline-block;
		&:hover{
			color:$color-accent;
		}
	}
	[class^="icon-"]:before,
	[class*=" icon-"]:before {
		display: inline-block;
		background-color: $color-light-shade;
		text-align: center;
		@extend %h4-font-size;
		@include ht-w-lh($Value: 40);
	}
}