我尝试使用以下方法将Blogger上的fa图标替换为自定义图标
.fa-facebook{content:url("")}
图片可以在Chrome上运行,但不能在FF或IE上运行。发生了什么事/有解决办法吗?Jsfiddle
7gcisfzg1#
根据W3school:定义和用法content属性与:before和:after伪元素一起使用,以插入生成的内容。因此,请使用.fa-facebook:before{content:url("")}代替.fa-facebook{content:url("")}Jsfiddle
.fa-facebook:before{content:url("")}
uujelgoq2#
根据官方规则,content属性只对::before和::after伪元素有效,所以在这种情况下,Chrome违反了规则!解决方案:将::before添加到图标的选择器中,这样它就可以在所有浏览器中工作。第一个
content
::before
::after
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; }
b1zrtrql4#
我希望替换此行并显示自定义图像。
<i class="fa-solid fa-graduation-cap fa-lg">
4条答案
按热度按时间7gcisfzg1#
根据W3school:
定义和用法
content属性与:before和:after伪元素一起使用,以插入生成的内容。
因此,请使用
.fa-facebook:before{content:url("")}
代替.fa-facebook{content:url("")}
Jsfiddle
uujelgoq2#
根据官方规则,
content
属性只对::before
和::after
伪元素有效,所以在这种情况下,Chrome违反了规则!解决方案:将
::before
添加到图标的选择器中,这样它就可以在所有浏览器中工作。第一个
emeijp433#
在背景中使用图像而不是内容,例如
b1zrtrql4#
我希望替换此行并显示自定义图像。