如何圆形字体真棒图标？

Question

我想要圆形的字体真棒图标。请参阅 - http://jsfiddle.net/JfGVE/1704/

问题是，无论如何，圆形图标更加椭圆。无法使其完美圆润。下面是CSS代码，我 -

i { 
display: inline-block; 
background: gray; 
color: white; 
border-radius: 50%; 
padding: 5px; 
} 

Answer 1

尝试调整高度/宽度和复位行高：

i { 
 
    display: inline-block; 
 
    background: gray; 
 
    color: white; 
 
    border-radius: 50%; 
 
    padding: 0.3em; /* adjust padding */ 
 
    line-height: initial !important; /* reset line-height */ 
 
    heigth: 1em; 
 
    width: 1em; 
 
    text-align:center; 
 
}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 
<i class="fa fa-close"></i> 
 
<br> 
 
<i class="fa fa-camera-retro fa-lg"></i> fa-lg 
 
<i class="fa fa-camera-retro fa-2x"></i> fa-2x 
 
<i class="fa fa-close fa-3x"></i> fa-3x 
 
<i class="fa fa-info fa-4x"></i> fa-4x 
 
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

[编辑]图标大小不等于高度/宽度。 所以我改变了答案并添加了heigth: 1em; width: 1em; text-align:center;

Answer 2

只要使用此：

<i class="fa fa-times-circle"></i> 

，或者如果你愿意，你可以试试这个太：

i.custom { 
 
    display: inline-block; 
 
    background: gray; 
 
    color: white; 
 
    border-radius: 50%; 
 
} 
 
i.custom:before, 
 
i.custom:after { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 40px; 
 
    width: 40px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 
<i class="custom fa fa-close"></i> 
 
<i class="fa fa-times-circle"></i>

Answer 3

最好避免以像素为单位设置固定宽度和高度。下面是使用一个额外的div与after伪元素绘制圆sollution，看到DEMO

HTML：

<div class="container"> 
    <i class="fa fa-close"></i> 
</div> 

CSS：

.container { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background-color: #555; 
    min-width: 2em; 
    border-radius: 50%; 
    vertical-align: middle; 
} 

.container:after { 
    content:''; 
    float: left; 
    width: auto; 
    padding-bottom: 100%; 
} 

Answer 4

只是填充它可以帮助你玩。 。

i { 
 
display: inline-block; 
 
background: gray; 
 
color: white; 
 
border-radius: 100%; 
 
padding: 5px 7px; 
 
}