字体真棒堆叠图像
问题描述:
我试图使用字体真棒堆叠图像列表作为示例页面http://fontawesome.io/examples/字体真棒堆叠图像
列表中所述:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
</ul>
叠放图片:
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
我无法正确显示图像,如下图所示:
https://jsfiddle.net/uqL4aLyj/
有谁知道如何正确对齐?
预先感谢您
最大
答
发生这种情况,因为.fa-stack
类应用height
,width
和2em
line-height
到堆叠组图标。确保非堆叠图标与堆叠图标对齐的一种快速方法是将自己的非堆叠图标视为一个图标堆叠。
你可以通过改变你目前的标记实现这一目标:
<li>
<i class="fa fa-camera-retro"></i>
text
</li>
要:
<li>
<span class="fa-stack">
<i class="fa fa-camera-retro fa-stack-1x"></i>
</span>
text
</li>
答
的fontawesome页面上的例子使用的有序/无序列表之外的堆叠的图像。将它们与<br>
标签分开。
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
First item<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
Second item
谢谢詹姆斯,干净的解决方案。无论如何,我想知道是否有可能通过编辑一些CSS类保持列表的原始宽度和高度 – Max