如何使用django-social-media的社交媒体图标替代分享链接文本

我正在尝试使用django-social-media分享按钮，当前分享链接默认展示文本而非Facebook、LinkedIn、Twitter等平台的社交媒体图标，我要如何展示图标来替代“Post to FaceBook”这类文字链接？

解决方案 #

django-social-media的内置分享标签默认会生成带平台默认文案的链接，你当前的写法会同时显示Font Awesome图标和默认文字，按下面的步骤调整即可只显示图标：

• 第一步：确保页面已正确引入Font Awesome资源，所有fa-开头的类都依赖这个图标库才能正常渲染
• 第二步：给分享标签传入空字符串作为显示文案，覆盖默认的文字内容

调整后的完整代码如下：

<!-- Facebook 分享按钮 -->
<a href="#!">
  <span class="fa-stack fa-lg">
    <i class="fas fa-circle fa-stack-2x" style="color:#4267B2"></i>
    <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
    {% post_to_facebook object_or_url " " %}
  </span>
</a>

<!-- LinkedIn 分享按钮 -->
<a href="{{ linkedin_url }}">
  <span class="fa-stack fa-lg">
    <i class="fas fa-circle fa-stack-2x" style="color: #0e76a8"></i>
    <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
    {% post_to_linkedin object_or_url " " %}
  </span>
</a>

<!-- Twitter 分享按钮 -->
<a href="#!">
  <span class="fa-stack fa-lg">
    <i class="fas fa-circle fa-stack-2x" style="color: #1DA1F2"></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
    {% post_to_twitter "New Article: {{object.title}}. Check it out!" object_or_url " " %}
  </span>
</a>

如果调整后还有对齐问题，可以审查分享标签生成的元素，给对应的类加如下CSS调整样式：

.social-share-link {
  display: inline-block;
  margin-left: -2em; /* 按需调整偏移量，对齐图标位置 */
  font-size: 0; /* 彻底隐藏可能残留的文字 */
}

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