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

Posted 2023-02-21

【中文标题】在一个圆圈中制作 Font Awesome 图标？

【英文标题】：Make Font Awesome icons in a circle?

【发布时间】：2014-03-21 06:32:09

【问题描述】：

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

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

是否有可能所有图标总是在带边框的圆形圆圈中？像这样的东西，我有一张图片：

使用

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

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

【参考方案1】：

更新：宁可使用 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;

注意：不要再使用它了。使用弹性盒子。

【讨论】：

添加 text-align:center;使它适用于几乎所有东西，甚至是 fa-info

垂直对齐怎么样？

你能调查一下吗？ ***.com/questions/64270359/…

【参考方案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/

【讨论】：

有一些东西，但不是圆形？

border-radius 应该对元素进行四舍五入。你用什么浏览器？将使用前缀更新我的答案

但这不是解决方案。这仅在 i 有内容时才有效。通常使用 FA，您的 i-tag 中没有内容，但图标稍后由 CSS 呈现：<i class="fa fa-lock"></i>，这正是 @Schneider 实际要求的。

@Jan 我明天将对此进行调查。但我看不到问题。你是对的，标签没有内容，但内容将通过 css 添加。即使图标无法加载，您也会看到一个圆圈。你能用答案制作一个问题的 jsFiddle 吗？

没有。这就是问题的答案。查看问题的图像。有阴影，不是硬圆。

【参考方案3】：

使用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 */

【讨论】：

你能调查一下吗？ ***.com/questions/64270359/…

【参考方案4】：

这是迄今为止我发现的最好和最精确的解决方案。

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;
    

【参考方案5】：

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

参考Font Awesome Stacked Icons

更新：- 小提琴stacked icons

【讨论】：

堆叠图标只能达到 2 倍。如果你想要比那个更大，它就行不通

希望这是公认的答案，它是使用 fontawesome 做到这一点的“正确”方法。接受的答案是不能很好地调整的 hack。

与数字相同<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>

@emrah - 这是这里唯一真正令人敬畏的字体，而不是自定义 css，所以它比这里的任何东西都更精确。

非常优雅的解决方案。 @mmativ 如果您的意思是圆圈上的背景颜色，您只需执行

【参考方案6】：

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

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

.socialiconscolor: white;

【讨论】：

你能调查一下吗？ ***.com/questions/64270359/…

【参考方案7】：

您不需要 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 图标:)

【讨论】：

Sampat Badhe 在两年多前的回答中也说过同样的话。为什么在写你的答案之前不阅读其他答案？

嘿，对不起 Sampat，我没有看到他回答，我会尝试修改我的答案并添加更多解决方案或有用的信息。

这是一个很好的解决方案，但它为每个图标提供了蓝色背景。有什么解决办法吗？

@CodeIt 只需使用 css 清除它或添加新的背景颜色。这应该不是问题。

你能调查一下吗？ ***.com/questions/64270359/…

【参考方案8】：

我喜欢 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;

【讨论】：

行高帮我解决了

添加!important 是一种创可贴，而不是解决方案。这意味着您在其他地方有另一个 CSS 属性覆盖了您的属性。

【参考方案9】：

更新：

最近学习了 flex，有一种更简洁的方法（没有表格和更少的 css）。将包装器设置为display: flex; 并将它的子级居中给它属性align-items: center; 用于（垂直）和justify-content: center;（水平）居中。

看到这个updated JS Fiddle

---

奇怪的是，以前没有人建议过这个。我总是用表格来做这个。 只需让包装器包含 display: table 并在其中居中放置东西，text-align: center 用于水平对齐，vertical-align: middle 用于垂直对齐。

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

还有一些像这样的 sass

.wrapper
  display: table; 

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

或查看JS Fiddle

【讨论】：

这是一款非常漂亮、干净又小巧的！这是 CSS 而不是 SCSS jsfiddle.net/bqtkmy0s

@summsel 这不是与我原来的答案确切相同吗？您只是在 scss 中而不是 css 中编写代码。

是的，当然是。我在 css 中尝试了您的解决方案，并且有很多人更喜欢 css。那么为什么不发布这个 css-version 的 jsfiddle。

你能调查一下吗？ ***.com/questions/64270359/…

【参考方案10】：

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>

【讨论】：

你能调查一下吗？ ***.com/questions/64270359/…

【参考方案11】：

这是您不需要使用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>

【讨论】：

你能调查一下吗？ ***.com/questions/64270359/…

【参考方案12】：

试试这个

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;

【参考方案13】：

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

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;

【参考方案14】：

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

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