css 用图片替换字体很棒的社交媒体图标

olhwl3o2  于 2022-11-26  发布在  其他
关注(0)|答案(4)|浏览(141)

我尝试使用以下方法将Blogger上的fa图标替换为自定义图标

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

图片可以在Chrome上运行,但不能在FF或IE上运行。发生了什么事/有解决办法吗?
Jsfiddle

7gcisfzg

7gcisfzg1#

根据W3school
定义和用法
content属性与:before和:after伪元素一起使用,以插入生成的内容。
因此,请使用.fa-facebook:before{content:url("")}代替.fa-facebook{content:url("")}
Jsfiddle

uujelgoq

uujelgoq2#

根据官方规则,content属性只对::before::after伪元素有效,所以在这种情况下,Chrome违反了规则!
解决方案:将::before添加到图标的选择器中,这样它就可以在所有浏览器中工作。
第一个

emeijp43

emeijp433#

在背景中使用图像而不是内容,例如

.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;
}
b1zrtrql

b1zrtrql4#

我希望替换此行并显示自定义图像。

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

相关问题