Social Icons Example including OpenGraph Meta Data etc, #SS3 #FontAwesome

app.less

.social-icons {
	margin-top: 60px;
	display: table;
	width: 100%;
	a {
		display: table-cell;
		width: 1%;
		text-decoration: none;
		text-align: center;
		@media (max-width: @screen-sm-max) {
			padding: 0 10px;
		}
		
	}
	
	i {
		font-size: 26px;
		line-height: 40px;
		vertical-align: center;
		display: block;
		
		@media (max-width: @screen-sm-max) {
			font-size: 40px !important;
			line-height: 40px;
		}
		
		&.email {
			color: #333;
		}

		&.facebook {
			color: #3b5998;
		}
		&.whatsapp {
			color: #4dc247;
		}
		&.google {
			color: #dd4b39;
		}
		&.twitter {
			color: #4099FF;
		}
		
	}
	
}

Social.ss

<div class="social-icons well">
				
				<meta property="og:title"       content="$Item.T('OpenImmoObjekttitel')" />
				<meta property="og:type"        content="website" />
				<meta property="og:url"         content="$Item.CanonicalLinkURL" />
				<meta property="og:image"       content="$Item.ImmoImages.First.Image.CroppedWatermarkedImage(470,246).AbsoluteURL" />
				<meta property="og:site_name"   content="mallorca-immobilien-guide.de" />
				<meta property="og:description" content="$Item.T('OpenImmoObjektbeschreibung')" />
				
				
				<meta name="twitter:card" content="summary_large_image">
				<meta name="twitter:site" content="@miguide">
				<meta name="twitter:creator" content="@miguide">
				<meta name="twitter:title" content="$Item.T('OpenImmoObjekttitel')">
				<meta name="twitter:description" content="$Item.T('OpenImmoObjektbeschreibung')">
				<meta name="twitter:image" content="$Item.ImmoImages.First.Image.CroppedWatermarkedImage(470,246).AbsoluteURL">
				
				
				<a class="recommendationModalFormTrigger action" title="<%t ImmobilienHolder.SEND_TO_FRIEND "Send to friend" %>" href="{$Top.Link}renderRecommendationModalform"  data-toggle="modal" data-target="#recommendationModal"><i class="fa fa-envelope-square email"></i></a>
				
				<!-- Twitter -->
				<a href="http://twitter.com/home?status=$Item.CanonicalLinkURL" title="Share on Twitter" target="_blank">
					<i class="fa fa-twitter-square twitter"></i>
				</a>
				
				<!-- Facebook -->
				<a href="https://www.facebook.com/sharer/sharer.php?u=$Item.CanonicalLinkURL" title="Share on Facebook" target="_blank" >
					<i class="fa fa-facebook-square facebook"></i> 
				</a>
				
				<!-- Google+ -->
				<a href="https://plus.google.com/share?url=$Item.CanonicalLinkURL" title="Share on Google+" target="_blank">
					<i class="fa fa-google-plus-square google"></i>
				</a>
				
				<a href="WhatsApp://send?text=$Item.CanonicalLinkURL" class="visible-xs"><i class="fa fa-whatsapp whatsapp"></i></a>
				
			</div>