在一个圆圈中制作 Font Awesome 图标？

Question

我在一些项目中使用了很棒的字体，但是我想用很棒的字体图标做一些事情，我可以很容易地调用这样的图标：

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

有没有可能所有的图标总是在带边框的圆圈中？像这样的，我有图：

使用

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

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

Answer 1

使用 Font Awesome，您可以轻松地使用像这样的堆叠图标：

更新：Font Awesome v6.2.1

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

更新：Font Awesome v5.15.4

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

refer Font Awesome Stacked Icons

更新：- 堆叠图标的小提琴

Answer 2

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>

---

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

Answer 3

你不需要 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> 

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

Answer 4

以

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 */
}

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

注意：不要再使用它了。使用 flexbox。

Answer 6

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

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

Answer 7

更新：

最近在学习flex，有一种更干净的方式（没有表格，更少的css）。将包装纸设置为

display: flex;

并使其子项居中，为其赋予属性

align-items: center;

（垂直）和

justify-content: center;

（水平）居中。

看到这个更新的 JS Fiddle

---

奇怪之前没有人建议过。我总是用表格来做这个。
简单地让包装纸有

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 Fiddle

Answer 8

这是不需要使用

padding

的方法，只需将

height

和

width

设置为

a

，让

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>

Answer 9

下面的例子对我来说不太适用，这是我制作的版本！

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

Answer 10

试试这个

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

Answer 11

Font Awesome 图标作为 :before 插入。因此，您可以像这样设置 i 或 a 的样式：

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

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

Answer 12

您可以使用此代码简单地获取圆形图标：

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

Answer 13

我喜欢 Dave Everitt 对 « line-height » 的回答，但它只能通过指定 « height » 来工作，然后我们必须添加 « !important » 到 line-height ...

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

Answer 14

这是迄今为止我找到的最好、最精确的解决方案。

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

Answer 15

你可以只使用这个 CSS 类 -

.i{
    display: flex;
    padding: .5rem;
    background-color: #888;
    border-radius: 50%;
}

这将完成您的工作