求助：如何将评论统计数字嵌入Font Awesome评论图标内

嘿，我来帮你搞定这个评论统计数字显示的问题！你现在的代码是把数字直接放在图标标签外面，导致数字和图标分开显示，自然没法嵌入到图标内部。下面给你两种实用的实现方案，根据你用的Font Awesome版本来选就行：

方案一：用Font Awesome图层功能（适合FA 5及以上版本） #

Font Awesome 5+自带了图层系统，能轻松把文字/数字叠加在图标上，修改后的代码如下：

echo '<div style="float:right; margin-top:15px; margin-left:5px;">
        <span class="fa-layers fa-fw">
          <i class="fa fa-comment" style="color:grey;"></i>
          <span class="fa-layers-text fa-inverse" style="font-size:0.6em; top:20%;">' . implode($app->count_reactie($topic['id'])) . '</span>
        </span>
        <span style="margin-left:5px;">reacties</span>
      </div>';

小细节说明： #

• fa-layers是图层容器，用来把图标和数字叠加在一起
• fa-layers-text专门用来放置叠加的文字/数字，fa-inverse能让数字和灰色图标形成明显对比
• 调整font-size和top的值，可以让数字在图标里的位置更贴合你的视觉需求

方案二：用CSS绝对定位（兼容旧版Font Awesome） #

如果你的Font Awesome版本比较旧，不支持图层功能，用CSS定位也能实现同样效果：

echo '<div style="float:right; margin-top:15px; margin-left:5px; position:relative;">
        <span class="fa fa-comment" style="color:grey; font-size:1.2em;"></span>
        <span style="position:absolute; top:-5px; right:-8px; background-color:#e74c3c; color:white; border-radius:50%; padding:2px 5px; font-size:0.7em;">' . implode($app->count_reactie($topic['id'])) . '</span>
        <span style="margin-left:8px;">reacties</span>
      </div>';

小细节说明： #

• 把图标和数字放在一个position:relative的容器里，这样数字的绝对定位会以这个容器为基准
• 通过top和right调整数字的位置，默认放在图标右上角，你可以根据需要修改数值
• 加了圆形背景和白色文字，让数字更醒目，你可以替换background-color改成你喜欢的颜色

额外小提醒： #

如果$app->count_reactie($topic['id'])返回的是单个数字（不是数组），其实不用implode，直接写$app->count_reactie($topic['id'])就行，你可以检查下这个函数的返回值类型哦~

内容的提问来源于stack exchange，提问作者thattommm