我想添加一些要堆叠在另一个图标内的文本。这是我的尝试:
<!-- How should I style this to work properly with fa-1x and fa-5x ???? -->
<span class="fa-stack fa-1x">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<span class="fa fa-stack-1x">31</span>
</span>
同时使用fa-1x和fa-5x时,有什么方法可以将其正确定位?
http://jsbin.com/opOwENe/3/edit
拉尔西
最佳答案
我认为最好为容器和文本创建一个不同的类。
这样的事情(我从评论中拨弄了 fiddle ,并为FontAwesome 4.0.3更新了:
http://jsfiddle.net/canuk/YzkWs/
.calendar-stack {
position: relative;
display: inline-block;
width: (13em / 14);
height: 1em;
.fa-calendar-o,
.calendar-day {
position: absolute;
}
.calendar-day {
top: (7em / 8);
left: (1em / 8);
width: (11em / 8);
height: (6em / 8);
font-family: sans-serif;
font-size: (8em / 14);
font-weight: 700;
line-height: (8em / 14);
text-align: center;
}
}
然后,您的HTML如下所示:
<div class="calendar-stack">
<i class="fa fa-calendar-o"></i>
<span class="calendar-day">1</span>
</div>
或这个5倍:
<div class="calendar-stack fa-5x">
<i class="fa fa-calendar-o"></i>
<span class="calendar-day">3</span>
</div>
已针对4.3.x更新
的CSS
.calendar-stack {
position: relative;
display: inline-block;
width: (13em / 14);
height: 1em;
.fa-calendar-o,
.calendar-day {
position: absolute;
}
.calendar-day {
top: (7em / 8);
left: (1em / 8);
width: (11em / 8);
height: (6em / 8);
font-family: sans-serif;
font-size: (8em / 14);
font-weight: 700;
line-height: (8em / 14);
text-align: center;
}
}
的HTML
<div class="calendar-stack fa-5x">
<i class="fa fa-calendar-o"></i>
<span class="calendar-day">3</span>
</div>
关于font-awesome - 在fontawesome图标中放置文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20411655/