替换 Font Awesome 社交媒体图标为图片

Question

我尝试使用自定义图标替换博客中的fa图标

.fa-facebook{content:url("")}

这些图片在Chrome上运行正常，但在FF或IE上无法正常显示。有什么解决办法吗？

Jsfiddle链接： https://jsfiddle.net/hd3nc4e3/ Chrome截图链接： Firefox截图链接：

- Wooneh

---

请在JSFiddle上发布您的演示代码。 - ItzMe_Ezhil

https://jsfiddle.net/hd3nc4e3/ - Wooneh

Answer 1

根据 W3school 的说法：

定义和用法

content 属性与伪元素 :before 和 :after 配合使用，用于插入生成的内容。

因此，不要使用 .fa-facebook{content:url("")} ，而应该使用 .fa-facebook:before{content:url("")} 。 Jsfiddle

- Alex

Answer 2

根据官方规则， content 属性仅适用于::before和::after伪元素。所以在这种情况下，Chrome违反了规定！

解决方法：在图标的选择器中添加::before，那么它将在所有浏览器中起作用。

.fa-facebook::before {
  content: url("https://lh3.googleusercontent.com/-VPr8buUo47w/VjMsRPIzr-I/AAAAAAAAAL4/AYBtvlNCQiw/s64-Ic42/clouds_social_media_icons_set_64x64_0000_facebook.png");
}
.fa-twitter::before {
  content: url("https://lh3.googleusercontent.com/-yDH1FuHcQ5s/VjMsQ2lXvxI/AAAAAAAAAMg/i8JHsTh6aU8/s64-Ic42/clouds_social_media_icons_set_64x64_0002_twitter.png");
}
.fa-instagram::before {
  content: url("https://lh3.googleusercontent.com/-VIveL13ocQc/VjMw7JU6dGI/AAAAAAAAAOo/AGxBey6rtC0/s64-Ic42/clouds_social_media_icons_set_64x64_0001_instagram.png")
}
.fa-pinterest::before {
  content: url("https://lh3.googleusercontent.com/-Or5qfrW2PFI/VjMsQziUH5I/AAAAAAAAAL8/bOIkRNtMSbo/s64-Ic42/clouds_social_media_icons_set_64x64_0001_pinterest.png");
}
.fa-google-plus::before {
  content: url("https://lh3.googleusercontent.com/-xIroPQ5PdBk/VjMsRhd-1VI/AAAAAAAAAMM/rcruNIarpPU/s64-Ic42/clouds_social_media_icons_set_64x64_0003_google%25252B.png");
}
.fa-heart::before {
  content: url("https://lh3.googleusercontent.com/-ymc-N9bHkpo/VjNAMkaZnpI/AAAAAAAAAPY/Yv1qLXXuG7E/s64-Ic42/clouds_social_media_icons_set_64x64_0001_bloglovin.png");
}

<ul class="site-social-networks secondary-2-primary style-default show-title">
  <li><a href="#" class="facebook" target="_blank" title="Facebook"><i class="fa fa-facebook"></i>Facebook</a>
  </li>
  <li><a href="#" class="twitter" target="_blank" title="Twitter"><i class="fa fa-twitter"></i>Twitter</a>
  </li>
  <li><a href="#" class="instagram" target="_blank" title="Instagram"><i class="fa fa-instagram"></i>Instagram</a>
  </li>
  <li><a href="#" class="pinterest" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i>Pinterest</a>
  </li>
  <li><a href="#" class="bloglovin" target="_blank" title="Bloglovin"><i class="fa fa-heart"></i>Bloglovin</a>
  </li>
  <li><a href="#" class="googleplus" target="_blank" title="Google Plus"><i class="fa fa-google-plus"></i>Google Plus</a>
  </li>
</ul>

- Mr Lister

Answer 3

使用背景图像而不是内容，例如

.fa-facebook{
    content: '';
    background:url("https://lh3.googleusercontent.com/-VPr8buUo47w/VjMsRPIzr-I/AAAAAAAAAL4/AYBtvlNCQiw/s64-Ic42/clouds_social_media_icons_set_64x64_0000_facebook.png");
    width:64px;
    height:64px;  
    display:inline-block;
}

- Shailesh

---

那你为什么不一开始就发布呢？你的解决方案一开始就有问题。 - Mr Lister

我已经添加了代码，为什么还需要创建 js fiddle 链接呢？你试过这个吗？ - Shailesh

我不需要这样做，是你需要！如果你回答了一个问题，那么确保它的正确性就是你的责任。 - Mr Lister

如果你对它的工作原理毫无头绪，那你怎么能够给别人贬值呢？如果你认为它不起作用，那就让它成为事实，我错了。 - Shailesh

也许你没有意识到，帖子的编辑历史始终是可见的。因此，每个人都可以看到你最初发布了一个不起作用的答案，然后在我说它不起作用之后进行了编辑，然后评论说“是的，它会起作用”。 - Mr Lister

是的，我已经编辑了那篇帖子，我只添加了显示属性，如果你认为我做错了什么，请道歉。 - Shailesh

Answer 4

我想替换这一行并显示自定义图像。

<i class="fa-solid fa-graduation-cap fa-lg">

- sams arif

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

如果您有新的问题，请通过单击提问按钮来提出。如果它有助于提供上下文，请包含此问题的链接。- 来自审核 - ahuemmer