<div class="social">
<div class="social_label">
Follow Us
</div>
<ul class="social_list">
<li class="social_item">
<a class="social_link" target="_blank" href="http://facebook.com">
<span class="social_icon i i-facebook-brand"></span>
<span class="u-sr-only">
Facebook
</span>
</a>
</li>
<li class="social_item">
<a class="social_link" target="_blank" href="http://twitter.com">
<span class="social_icon i i-twitter-brand"></span>
<span class="u-sr-only">
Twitter
</span>
</a>
</li>
<li class="social_item">
<a class="social_link" target="_blank" href="http://instagram.com">
<span class="social_icon i i-instagram-brand"></span>
<span class="u-sr-only">
Instagram
</span>
</a>
</li>
<li class="social_item">
<a class="social_link" target="_blank" href="http://linkedin.com">
<span class="social_icon i i-linkedin-brand"></span>
<span class="u-sr-only">
Linkedin
</span>
</a>
</li>
<li class="social_item">
<a class="social_link" target="_blank" href="http://youtube.com">
<span class="social_icon i i-youtube-brand"></span>
<span class="u-sr-only">
Youtube
</span>
</a>
</li>
</ul>
</div>
<div class="social">
<div class="social_label">
Follow Us
</div>
<ul class="social_list">
{{#each items}}
<li class="social_item">
<a class="social_link" target="_blank" href="{{ link }}">
<span class="social_icon i i-{{ icon }}-brand"></span>
<span class="u-sr-only">
{{ label }}
</span>
</a>
</li>
{{/each}}
</ul>
</div>
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"items": [
{
"icon": "facebook",
"link": "http://facebook.com",
"label": "Facebook"
},
{
"icon": "twitter",
"link": "http://twitter.com",
"label": "Twitter"
},
{
"icon": "instagram",
"link": "http://instagram.com",
"label": "Instagram"
},
{
"icon": "linkedin",
"link": "http://linkedin.com",
"label": "Linkedin"
},
{
"icon": "youtube",
"link": "http://youtube.com",
"label": "Youtube"
}
]
}
Depending on the size of your icons you can use some utility classes to arrange the postion of the label.