Circular icons act as squares - html

Question

I'm creating a card in bootstrap with some social media icons (Font-awesome). For some reason all my icons are treated as boxes and have a black outline around them. My hover shadows also wrap around the square rather than the icon itself.
Why does this happen and how can I fix it?
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 text-center">
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#00aced;"></i>
<i class="fa fa-twitter fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#0077B5;"></i>
<i class="fa fa-linkedin fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#171515;"></i>
<i class="fa fa-github fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
</div>

Answer 1

The box border is being generated by they type="button" parameter in your anchors, which has a defined -webkit-appearance: button; in bootstrap's stylesheet. So remove that type="button" parameter, or style it as desired.
As for the shadows, if you want them to keep the shape of the icon instead of being boxed, you should either use text-shadow or filter: drop-shadow instead of box-shadow