位置堆叠字体真棒图标

Question

我正在尝试通过在 fa-square-o 上堆叠 fa-circle 来创建一个 "vegetarian" 图标。问题是圆没有相对于正方形垂直居中对齐。我尝试使用 margin/padding/vertical-align css 属性，但它们没有任何效果。我的代码是：

<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x " ></i>
</span>

Answer 1

您可以通过添加顶部将其向上移动：

.fa-stack-1x {
    top: -1px;
}

Answer 2

来自文档 http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#stacked

A method for easily stacking multiple icons. Use the icon-stack class on the parent and icon-stack-base for the bottom icon. You may need to swap icon for fa depending on the implementation you are using

所以试试

<span class="icon-stack">
<i class="fa-square-0 icon-stack-base"></i>
<i class="fa fa-circle icon-light"></i>

如果大小有问题，您可以使用 fa-dot-circle-o then stack a white circle over it, leaving you with just a dot - or use a unicode font with the middle dot 作为圆圈，例如 unifoundry 的 unifont。

在css中垂直对齐的标准方式是设置height和line-height彼此相等，然后设置vertical-align: middle

Answer 3

通过查看以下示例，您可以很快猜到，圆居中的问题不在于圆 vertical-align 值，而是 height 或 top 并且left 位置。

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

.fa-square-o {
  color: rgb(0, 255, 0);
}

.fa-circle {
  color: rgba(255, 0, 0, .5);
}

<span class="fa-stack fa-5x">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-circle fa-stack-2x"></i>
</span>

<span class="fa-stack fa-5x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-1x"></i>
</span>

圆形不适合正方形，因为 .fa-stack-2x class 的 font-size 值（默认值为 2em）也被忽略了小圆适合正方形。

解决此问题的最简单方法是增加用作 fa-stack-2x 元素的图标的 font-size 值。

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

.fa-square-o {
    color: rgb(0, 255, 0);
    font-size: 2.16em;
}

.fa-circle {
    color: rgba(255, 0, 0, .5);
}

<span class="fa-stack fa-5x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-2x"></i>
</span>

<span class="fa-stack fa-5x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-1x"></i>
</span>

<span class="fa-stack fa-4x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-2x"></i>
</span>

<span class="fa-stack fa-3x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-1x"></i>
</span>

<span class="fa-stack fa-2x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-2x"></i>
</span>

<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-1x"></i>
</span>

位置堆叠字体真棒图标

Position stacked font awesome icon

html

css

font-awesome