我正在尝试将font-awesome图标圆形化。请参考-http://jsfiddle.net/JfGVE/1704/
问题是,无论如何,圆形图标都更像椭圆形。无法完美地变成圆形。以下是我拥有的CSS代码-
i {
display: inline-block;
background: gray;
color: white;
border-radius: 50%;
padding: 5px;
}
我正在尝试将font-awesome图标圆形化。请参考-http://jsfiddle.net/JfGVE/1704/
问题是,无论如何,圆形图标都更像椭圆形。无法完美地变成圆形。以下是我拥有的CSS代码-
i {
display: inline-block;
background: gray;
color: white;
border-radius: 50%;
padding: 5px;
}
最好避免设置像素固定的宽度和高度。这里提供了一种解决方案,使用一个带有 after
伪元素的额外 div 来绘制圆形,请参见 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%;
}
i {
display: inline-block;
background: gray;
color: white;
border-radius: 50%;
padding: 0.3em; /* adjust padding */
line-height: initial !important; /* reset line-height */
height: 1em;
width: 1em;
text-align:center;
}
<link rel="stylesheet" href="https://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
height: 1em; width: 1em; text-align: center;
只需使用这个:
<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>