在一个圆圈中制作字体真棒图标？

Question

我在一些项目上使用字体awsome但我有一些我想用字体真棒图标做的事情,我可以轻松调用这样的图标

<i class="fa fa-lock"></i>

是否有可能所有图标始终是带有边框的圆形,这样的东西我有一张图片

运用

i
{
 background-color: white;
 border-radius: 50%;
 border: 1x solid grey;
 padding:10px;
}

会有效果,但问题是图标总是比txt或元素更大,任何解决方案？

Answer 1

使用Font Awesome,您可以轻松使用这样的堆叠图标:

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-lock fa-stack-1x"></i>
</span>

参考字体真棒堆积图标

更新: - 小提琴堆叠图标

Answer 2

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>

JsFiddle的老答案:http://fiddle.jshell.net/4LqeN/

Answer 3

你不需要css或html技巧.Font Awesome已经内置了它 - fa-stack

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> 

//我们现在圈内有facebook图标:)

Answer 4

如果您使用ems进行测量,包括line-height,font-size并且border-radius,使用text-align: center它可以使事情变得非常可靠:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

Answer 5

更新:而是使用flex.

如果你想要精确,这就是你要走的路.

小提琴.去玩 - > http://jsfiddle.net/atilkan/zxjcrhga/

这是HTML

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

这是CSS

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

玩得开心

Answer 6

你也可以这样做.我想在我的icomoon图标周围添加一个圆圈.这是代码.

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

Answer 7

这是您不需要使用的方法padding，只需设置heightand widthfor thea并让flex句柄 with margin: 0 auto。

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Answer 8

更新：

最近学习flex时，有一种更简洁的方法（没有表且CSS更少）。将包装器设置为，display: flex;然后将其居中设置为子级，为它align-items: center;提供（垂直）和justify-content: center;（水平）居中的属性。

看到这个更新的JS小提琴

奇怪的是，以前没有人建议这样做。我总是使用表来执行此操作。
只需使包装纸display: table内部具有中心位置即可text-align: center进行水平和vertical-align: middle垂直对齐。

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

还有像这样的无礼

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

或者看这个JS小提琴