I am attempting to add a circular border to a Font Awesome icon and this is the result: https://i.sstatic.net/28NFV.png
This code snippet is for the page header. My goal is to enlarge the buttons when the screen size changes.
.circle-icon {
width: 80px;
height: 80px;
border-radius: 50%;
text-align: center;
line-height: 100px;
vertical-align: middle !important;
padding: 30px;
border-color: #fff;
border-width:1px;
border-style:solid;}
The above code is just a portion of the menu design
<div class="col-xs-6 col-md-8">
<div class="row icon-bar">
<div class="col-lg-2">
<a class="active" href="#">
<i class="fa fa-tag circle-icon"></i>
<div style="font-size:14px !important; padding: 7px !important;">
Voucher
</div>
</a>
</div>
<div class="col-lg-2">
<a href="#">
<i class="fa fa-qrcode circle-icon"></i>
<div style="font-size:14px !important; padding: 7px !important;">
Redeem
</div>
</a>
</div>