基于这篇文章... 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>
我希望奖杯内的“1”看起来像这样...❶ ...黑色圆圈内的“1”,类似于带编号的台球,我希望能够为其设置 CSS 样式,颜色,大小,边框等。这有可能实现吗?这个❶是我从Word里抄来的一个符号。
最佳答案
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}
如果这符合您的想法,请告诉我。
关于html - 在 fontawesome 图标上设置字体样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31777757/