Having trouble adding a rounded icon to the top center of a card, but part of the icon is getting cut off. Any suggestions?
.header-icon-round {
width: 60px;
height: 60px;
border-radius: 30px;
font-size: 30px;
background-color: #fff;
color: gray;
border: 2px solid #dedede;
position: relative;
margin: 0 auto;
padding: 0;
line-height: 60px;
position: absolute;
top: -10px;
left: 50%;
margin-left: -30px;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="card-columns">
<div class="card card-block text-xs-center">
<div class="header-icon-round">
<i class="ti-wallet"></i>
</div>
<h4 class="card-title" style="padding-top: 80px;">
My title
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore quod ab.</p>
<a href="" class="btn btn-outline-primary btn-rounded">Button Call</a>
</div>
</div>
</div>Appreciate any help you can provide!