位置堆叠字体真棒图标
Position stacked font awesome icon
我正在尝试通过在 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>
您可以通过添加顶部将其向上移动:
.fa-stack-1x {
top: -1px;
}
来自文档 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
通过查看以下示例,您可以很快猜到,圆居中的问题不在于圆 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>
我正在尝试通过在 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>
您可以通过添加顶部将其向上移动:
.fa-stack-1x {
top: -1px;
}
来自文档 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
forfa
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
通过查看以下示例,您可以很快猜到,圆居中的问题不在于圆 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>