CSS 在圆圈中制作 Font Awesome 图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21905710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Font Awesome icons in a circle?
提问by Schneider
I am using font awesome on some project but I have some things that I want to do with font awesome icons, I can easily call an icon like this:
我在某个项目中使用了 font awesome ，但我想用 font awesome 图标做一些事情，我可以轻松地调用这样的图标：
<i class="fa fa-lock"></i>
Is it possible to all icon always be in round circle with border? Something like this, I have a picture:
是否有可能所有图标总是在带边框的圆形圆圈中？像这样的东西，我有一张照片：
Using
使用
i
{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
}
Will do the effect, but the problem is that icons are always bigger that the text or element beside, any solutions?
会产生效果，但问题是图标总是比旁边的文本或元素大，有什么解决方案吗？
回答by Sampat Badhe
With Font Awesome you can easily use stacked icons like this:
使用 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>
refer Font Awesome Stacked Icons
参考字体真棒堆叠图标
Update:- Fiddle for stacked icons
更新：- 用于堆叠图标的小提琴
回答by Nico O
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/http://fiddle.jshell.net/4LqeN/
回答by Vasyl Gutnyk
You don't need css or html tricks for it. Font Awesome has built in class for it - fa-circleTo stack multiple icons together you can use fa-stack class on the parent div
你不需要 css 或 html 技巧。Font Awesome 为其内置了类 - fa-circle要将多个图标堆叠在一起，您可以在父 div 上使用 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>
//And we have now facebook icon inside circle:)
//我们现在在圆圈内有facebook图标:)
回答by Dave Everitt
if you use ems for the measurements, including line-height, font-sizeand border-radius, with text-align: centerit makes things pretty solid:
如果你使用 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 */
}
回答by atilkan
Update:Rather use flex.
更新：而是使用 flex。
If you want precision this is the way to go.
如果你想要精确，这是要走的路。
Fiddle. Go Play -> http://jsfiddle.net/atilkan/zxjcrhga/
小提琴。去玩 -> http://jsfiddle.net/atilkan/zxjcrhga/
Here is the HTML
这是 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>
Here is the CSS
这是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;
}
Have Fun
玩得开心
回答by Ian Blair
You can also do this. I wanted to add a circle around my icomoon icons. Here is the code.
你也可以这样做。我想在我的 icomoon 图标周围添加一个圆圈。这是代码。
span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}
回答by nclsvh
UPDATE:
更新：
Upon learning flex recently, there is a cleaner way (no tables and less css). Set the wrapper as display: flex;and to center it's children give it the properties align-items: center;for (vertical) and justify-content: center;(horizontal) centering.
最近在学习 flex 时，有一种更简洁的方法（没有表格和更少的 css）。将包装器设置为display: flex;并居中，它的子项为其align-items: center;提供（垂直）和justify-content: center;（水平）居中的属性。
See this updated JS Fiddle
看到这个更新的 JS Fiddle
Strange that nobody suggested this before.. I always use tables to do this.
Simply make a wrapper have display: tableand center stuff inside it with text-align: centerfor horizontal and vertical-align: middlefor vertical alignment.
奇怪的是，之前没有人建议这样做.. 我总是用表格来做这件事。
只需使包装器display: table在其内部放置并居中放置，即可text-align: center用于水平vertical-align: middle对齐和垂直对齐。
<div class='wrapper'>
<i class='icon fa fa-bars'></i>
</div>
and some sass like this
和一些像这样的蠢货
.wrapper{
display: table;
i{
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
or see this JS Fiddle
或者看这个JS Fiddle
回答by mmativ
This is the approach you don't need to use padding, just set the heightand widthfor the aand let the flexhandle with margin: 0 auto.
这是您不需要使用的方法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>回答by Petros Kyriakou
The below example didnt quite work for me,this is the version that i made work!
下面的例子对我来说不太适用，这是我制作的版本！
HTML:
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:
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;
}
回答by MaxineHu
try this
尝试这个
HTML:
HTML：
<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>
CSS:
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;
}
