CSS 将 Font Awesome 图标 (fa-2x) 与堆叠图标 (fa-stack) 对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24892826/
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
Align Font Awesome icons (fa-2x) with stacked icons (fa-stack)
提问by Tom Prats
I'm trying to align 4 icons in a row for the share functionality of a website. When I was using 4 normal icons they aligned perfectly and were the same size. Now I'm trying to have one of them stacked so that it has a border and it's creating some problems
我正在尝试将 4 个图标连续对齐以实现网站的共享功能。当我使用 4 个普通图标时，它们完美对齐并且大小相同。现在我正在尝试将其中一个堆叠起来，以便它具有边框，并且会产生一些问题
Below is code I've been playing with:
下面是我一直在玩的代码：
<div class="share-results">
<a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"></a>
<a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""></a>
<a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""></a>
<a class="fa fa-2x fa-stack" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-link fa-stack-1x"></i>
</a>
</div>
This creates:
这会产生：
It seems like there's just a sizing problem, so I played around with using fa-lg:
似乎只是尺寸问题，所以我尝试使用 fa-lg：
And also without any sizing helper on the stacked element:
并且在堆叠元素上也没有任何大小调整助手：
Does anyone know how to align an icon with fa-2xto a stacked icons?
有谁知道如何将图标与fa-2x堆叠的图标对齐？
回答by Ivan Gerasimenko
There is a way to accomplish this task with minimum usage of new CSS styles:
有一种方法可以在最少使用新 CSS 样式的情况下完成此任务：
We should use envelope which has the same style as twitter and facebook, I mean square-style with fa-envelope-squareclass. And make all anchor items stacked:
我们应该使用与 twitter 和 facebook 风格相同的信封，我的意思是带有fa-envelope-square类的方形风格。并使所有锚点项目堆叠：
<div class="share-results">
<a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#">
<i class="fa fa-envelope-square fa-stack-2x"></i>
</a>
<a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href="">
<i class="fa fa-facebook-square fa-stack-2x"></i>
</a>
<a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href="">
<i class="fa fa-twitter-square fa-stack-2x"></i>
</a>
<a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-inverse fa-link fa-stack-1x"></i>
</a>
</div>
In addition to this we change margin between stacked elements to make them look as in your example:
除此之外，我们更改堆叠元素之间的边距，使它们看起来像您的示例：
.fa-stack { margin: -2px; }
The result would look like this:
结果如下所示：
回答by alex
I couldn't figure out a durable solution using the fa-* classes alone, but I did come up with a couple of ways to accomplish this that are admittedly slightly hacky, but not terribly hacky.
我无法单独使用 fa-* 类找出一个持久的解决方案，但我确实想出了几种方法来实现这一点，这些方法虽然有点老套，但不是非常老套。
The first approach superimposes the fa-linkicon, as text, over a normal fa fa-2x fa-square-oicon.
第一种方法将fa-link图标作为文本叠加在普通fa fa-2x fa-square-o图标上。
<div class="share-results">
<a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
<a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
<a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
<a class="fa fa-2x fa-square-o stacked" data-toggle="tooltip" title="Share by Link" data-placement="top"></a>
</div>
<style>
.stacked {
position:relative;
}
.stacked:after {
position: absolute;
font-family: FontAwesome;
font-size: .6em;
top:6px;
left:4px;
content: "\f0c1"; /*link icon*/
}
</style>
The second approach uses a combination of position: fixedand a custom font-sizeto help the new link align slightly better:
第二种方法使用position: fixed和 自定义的组合font-size来帮助新链接更好地对齐：
<div class="share-results">
<a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
<a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
<a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
<a class="fa fa-2x fa-stack stacked2" data-toggle="tooltip" title="Share by Link" data-placement="top">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-link fa-stack-1x"></i>
</a>
</div>
<style>
.stacked2 {
position: fixed;
font-size: 1.1em !important;
top: -7px;
left: -4px;
}
</style>
The second approach is a little more accurate, but I've included the first for completeness if you'd like to play around with it. Here are the end results, respectively:
第二种方法更准确一些，但如果您想尝试一下，我已经包含了第一种方法以保持完整性。以下分别是最终结果：
And here's a CodePen example.
这是一个CodePen 示例。
I'm not sure if this answers your question, but I hope this helps a little.
我不确定这是否能回答您的问题，但我希望这会有所帮助。
回答by crazymatt
Since the font awesome icons are all about widths, heights and line heights I tried to create a solution where all their values were the same to (hopefully) avoid confusion and to make it easier to update moving forward.
由于字体真棒图标都是关于宽度、高度和行高的，我试图创建一个所有值都相同的解决方案，以（希望）避免混淆并使其更容易更新。
Using the example you gave I set these CSS properties:
使用您提供的示例，我设置了这些 CSS 属性：
.fa {
/*this sets values for all icons*/
color: gray;
font-size: 50px;
line-height: 55px;
text-decoration: none;
}
.fa-link {
/*make inner icon smaller but keep line-height the same so its centered vertically*/
font-size: 30px;
}
.fa-stack-cust {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
line-height: 55px;
}
I wrapped the icons within a un-ordered list and the are now showing all on the same line. Here is the JS.Fiddle showing you a working example. You will be able to see the HTML changes even though they are minor. Hope that helps.
我将图标包裹在一个无序列表中，现在它们都显示在同一行上。这是 JS.Fiddle 向您展示了一个工作示例。您将能够看到 HTML 更改，即使它们很小。希望有帮助。
