在此帖子的基础上...... Font over font awesome icon
<span class="fa-stack fa-3x">
<i class="fa fa-trophy fa-stack-2x"></i>
<span class="fa fa-stack-1x" style="color:red;">
<span style="font-size:35px; margin-top:-20px; display:block;">
#1
</span>
</span>
我想要&#34; 1&#34;在奖杯内看起来像这样...❶...它的一个&#34; 1&#34;在一个黑色的圆圈内,类似于一个编号的台球,我希望能够将它的CSS样式,颜色,大小,边框等都有可能实现吗?这个❶是我从Word复制的符号。
答案 0 :(得分:1)
<强> HTML:强>
<span class="fa-stack fa-3x">
<i class="fa fa-trophy fa-stack-2x"></i>
<span class="fa fa-stack-1x" style="color:red;">
<span>
#1
</span>
</span>
</span>
<强> CSS:强>
.fa-trophy ~ .fa{font-size:35px;margin-top:13px;display:block;position:relative}
.fa-trophy ~ .fa span{background:#fff;color:red;border-radius:50%;width:24px;height:24px;text-align:center;font-size:20px;line-height:20px;display:block;padding:4px;position:absolute;top:16%;left:0;right:0;margin:auto}
请告诉我这是否符合您的想法。