// horizontal share
.horizontal-share {
margin-bottom: pxr(30);
text-align: center;
.custom_images {
display: flex;
align-items: center;
justify-content: center;
a {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
margin: 0 pxr(15);
text-decoration: none;
align-items: center;
i:before {
color: $pink;
}
&:hover {
i:before {
color: darken($pink, 15%);
}
}
svg {
// default
width: pxr(24);
height: auto;
}
// fb is thinner
&[title='Facebook'] {
svg {
width: pxr(15);
}
}
}
}
}
<div class="horizontal-share">
<div class="addthis_toolbox horizontal">
<div class="custom_images">
<a class="addthis_button_twitter" aria-label="Share this post on Twitter">
<i aria-hidden="true" class="fab fa-twitter"></i>
</a>
<a class="addthis_button_facebook" aria-label="Share this post on Facebook">
<i aria-hidden="true" class="fab fa-facebook-f"></i>
</a>
<a class="addthis_button_linkedin" aria-label="Share this post on LinkedIn">
<i aria-hidden="true" class="fab fa-linkedin-in"></i>
</a>
<a class="addthis_button_email" aria-label="Email this post">
<i aria-hidden="true" class="fas fa-envelope"></i>
</a>
<a class="addthis_button_messenger" aria-label="Share this post on Facebook Messenger">
<i aria-hidden="true" class="fab fa-facebook-messenger"></i>
</a>
<a class="addthis_button_slack" aria-label="Share this post on Slack">
<i aria-hidden="true" class="fab fa-slack-hash"></i>
</a>
</div>
</div>
</div>