[英]Style font over fontawesome icon
Building on this post... 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>
I want the "1" inside the trophy to look like this...❶ ... its a "1" inside a black circle, similar like a numbered billiard ball and I want to be able to CSS style it, color, size, border, etc. Is that possible to achieve? 我希望奖杯内的“ 1”看起来像这样……❶……黑圈内的“ 1”,类似于编号的台球,我希望能够CSS设置样式,颜色,大小,边框等。这有可能实现吗? This ❶ is a symbol I copied from Word.
这是我从Word复制的符号。
HTML: 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: 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}
Let me know if that's along the lines of what you had in mind. 让我知道这是否符合您的想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.