CODEWITHSUNDEEP
csstwitter-bootstrap
glitchbox
glitchbox

Reputation: 133

Bootstrap causing my css circle to be an oval?

For some reason a few of my circles with font awesome icons become an oval with bootstrap. If I remove the padding it makes them both perfect circles, however then the circles are too small. How can I make these with the padding I want, but remain as a circle?

.icon-circle{
    display: table-cell;
    padding: 30px;
    font-size:2.5em!important;
    background:#666;
    background: #3498DB;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.46);
    -webkit-border-radius:1100%;
    -moz-border-radius:100%;
    -o-border-radius:100%;
    border-radius:100%;
    border:6px solid #fff;
    color:#FFF;
    text-align:center;
    vertical-align:middle;
    width:60px;
    height:60px;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

JSFIDDLE

Upvotes: 1

Views: 4489

Answers (2)

petereneric
petereneric

Reputation: 127

I had the same problem and solved it by surounding the html container for the circle with a div container. Like this:

<div>
 <div class="circle"></div>
</div>

The css part is straight like this:

.circle {
  height: $sizeIconItem;
  width: $sizeIconItem;
  border-radius: 50%;
}

Upvotes: 1

roo2
roo2

Reputation: 6071

Remove padding, increase width& height and use lineheight for vertical centering

https://jsfiddle.net/jx37v7nj/6/

.icon-circle {
    display: inline-block;
    padding: 0;
    line-height: 80px;
    width: 80px;
    height: 80px;
}

Upvotes: 2

Related Questions