如何将Font Awesome图标放在圆形中？

Question

我正在一些项目中使用Font Awesome，但我希望能够对其进行一些操作。 我可以像这样轻松地调用图标：

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

是否有可能让所有图标都始终呈现带有边框的圆形？就像这样，我有一张图片：

使用

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

这样做可以起到效果，但问题在于图标总是比旁边的文本或元素大，有什么解决方法吗？

- Schneider

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>

参考Font Awesome堆叠图标

更新：- 堆叠图标的代码示例

- Sampat Badhe

---

堆叠的图标只能在2倍大小以下起作用。如果您想要更大的尺寸，它将无法正常工作。 - J Lee

希望这个回答被采纳，这才是使用fontawesome的“正确”方式。被采纳的回答只是一个不太好的调整方法。 - Will Bowman

数字也是一样的 <span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span> - m3nda

@emrah - 这是唯一一个真正使用fontawesome而不是自定义CSS的选项，因此比这里的任何东西都更精确。 - Will Bowman

这个堆叠图标的问题是，你不能在圆形上放置背景。 - mmativ

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/

- Nico O

---

有东西，但不是圆形的吗？ - Schneider

border-radius 应该使元素变圆。你用什么浏览器？我会在我的答案中更新前缀。 - Nico O

但这不是一个解决方案。只有当'i'具有内容时，这才有效。通常使用FA时，在i标签内没有内容，而图标稍后由CSS呈现：<i class ="fa fa-lock"> </i>，这正是@Schneider实际请求的内容。 - Jan

不是。这是问题的答案。请看问题中的图片。有一个阴影，而不是一个硬圆圈。 - Nico O

我只想补充一下，要想得到一个完美的圆形，请使用边框半径的50%值 :) - Pavel Hasala

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

- Vasyl Gutnyk

---

Sampat Badhe在2年前的回答中已经说了同样的话。为什么在写下你自己的回答之前不去阅读其他回答呢？ - Taras Yaremkiv

嘿，抱歉Sampat，我没有看到他的回答，我会尝试修改我的答案并添加更多解决方案或有用信息。 - Vasyl Gutnyk

这是一个不错的解决方案，但它会给每个图标都加上蓝色背景。有什么解决办法吗？ - Jamshaid K.

@CodeIt 只需使用 CSS 清除它或添加新的背景颜色。这不应该是一个问题。 - Vasyl Gutnyk

你可以看一下这个吗？https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native - user13101751

Answer 4

使用em作为基本单位的圆形字体图标

如果您在测量中使用em，包括行高、字体大小和边框半径，并使用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 */
}

- Dave Everitt

---

你能看一下这个吗？https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native - user13101751

Answer 5

更新：最好使用flex。

如果你想要精度，这是最好的方法。

Fiddle. Go Play -> 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。

- atilkan

---

添加 text-align:center; 可以使其与几乎所有东西兼容，甚至包括 fa-info。 - Marcio

垂直对齐怎么样？ - atilkan

你能看一下这个吗？https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native - user13101751

Answer 6

更新:

最近学习了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

- nclsvh

---

这是一个非常漂亮、干净、小巧的代码！这里有一个使用CSS而不是SCSS的JSFiddle示例：https://jsfiddle.net/bqtkmy0s/ - summsel

@summsel，这不是与我的原始答案完全一样吗？您只是用SCSS而不是CSS编写代码。 - nclsvh

是的，当然可以。我在CSS中尝试了您的解决方案，有很多人更喜欢使用CSS。那么为什么不发布这个CSS版本的jsfiddle呢？ - summsel

你能看一下这个吗？https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native - user13101751

这是最简单的解决方案，应该被接受为答案，因为它不需要像被接受或得到最高票数的答案中所示那样添加新元素。这个答案非常好地遵循了KISS技术。 - vikramvi

Answer 7

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

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

- Ian Blair

Answer 8

下面是一种不需要使用 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>

- mmativ

---

你能看一下这个吗？https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native - user13101751

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

- Petros Kyriakou

Answer 10

try this

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

- MaxineHu