让字体酷炫的图标在一个圆圈？

我在一些项目中使用了“字体酷毙了”，但是我有一些想用“字体酷毙了”的图标来做的事情，我可以很容易地调用这样的图标:

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

有没有可能所有的图标都是带边框的圆形:

enter image description here

吸毒

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

会有这样的效果，但问题是图标总是比旁边的文字或元素大，有什么解决办法吗？

384186 次浏览
小开
最佳答案 

i.fa {
display: inline-block;
border-radius: 60px;
box-shadow: 0 0 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>

老掉牙的回答: http://fiddle.jshell.net/4lqen/
小开

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

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

使用 Font Awesome，你可以很容易地使用这样的堆叠图标:

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

请参阅 字体超赞堆叠图标

更新: - 堆叠的图标

小开

使用 em作为基准测量的圆形字体图标

如果你使用 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 */
}
小开

更新: 宁愿使用 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;
}

注意: 不要再使用这个了。使用弹簧盒。

小开

下面的例子不太适合我，这是我的版本工作！

HTML:

<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>

CSS:

.social-links {
text-align:center;
}


.social-links a{
display: inline-block;
width:50px;
height: 50px;
border: 2px solid #909090;
border-radius: 50px;
margin-right: 15px;


}
.social-links a i{
padding: 18px 11px;
font-size: 20px;
color: #909090;
}
小开

试试这个

HTML:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

CSS:

i {
width: 30px;
height: 30px;
}


.icon-2x-circle {
text-align: center;
padding: 3px;
display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0px 0px 2px #888;
-webkit-box-shadow: 0px 0px 2px #888;
box-shadow: 0px 0px 2px #888;
}
小开

这种方法不需要使用 padding，只需要为 a设置 height和 width，让 flex处理 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>

小开

更新 :

在最近学习 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 小提琴

小开

字体超赞的图标是以 a: before 的形式插入的。因此你可以像这样设计你的 我或者 一:

.i {
background: #fff;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
}


<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
小开

你不需要 CSS 或者 html 技巧。 字体了不起的内置类为它-转圈堆叠多个图标在一起，你可以使用 fa- 堆栈类的父 div

<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 的图标:)

小开

你可以简单地使用下面的代码获取圆形图标:

<a class="facebook-share-button social-icons" href="#" target="_blank">
<i class="fab fa-facebook socialicons"></i>
</a>

现在您的 CSS 将是:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}
小开

我喜欢 Dave Everitt 的“ line-height”的回答，但它只能通过指定“ height”来工作，然后我们必须添加“ ！重要的”线高..。

.cercle {
font-size: 2em;
width: 2em;
height: 2em;
text-align: center;
line-height: 2em!important;
background: #666;
color: #fff;
border-radius: 2em;
}
小开

这是我目前为止找到的最好最精确的解决方案。

CSS:

.social .fa {
margin-right: 1rem;
border: 2px #fff solid;
border-radius: 50%;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 0.5rem;
}

提交答案