Social Icon

// HTML

<div class="social-link">
	<ul>
		<li><a class="vk-color" href="#"><i class="fa fa-vk"></i></a></li>
		<li><a class="instagram-color" href="http://instagram.com/v.gordeew" target="blank"><i class="fa fa-instagram"></i></a></li>
		<li><a class="github-color" href="https://github.com/vgordeew" target="blank"><i class="fa fa-github"></i></a></li>
		<li><a class="youtube-color" href="#"><i class="fa fa-youtube"></i></a></li>
	</ul>
</div>
        
// CSS

.social-link
	margin-top: 10px

.social-link li
	display: inline-block

.social-link li a
	font-size: 24px
	height: 45px
	line-height: 45px
	margin-right: 5px
	width: 45px
	-webkit-transition: 0.4s
	transition: 0.4s
	margin-top: 30px
	margin-right: 30px
	margin-left: 30px

.social-link ul
	list-style-type: none
	text-align: center
	margin-top: 70px
	margin-bottom: 0
	padding: 0
  
  .vk-color
	color: $footer-color
.vk-color:hover
	color: $main-color

.instagram-color
	color: $footer-color
.instagram-color:hover
	color: $main-color

.github-color
	color: $footer-color
.github-color:hover
	color: $main-color

.youtube-color
	color: $footer-color
.youtube-color:hover
		color: $main-color