这个问题被问了很多遍了,给出的所有答案都行不通了……我看到给出的示例代码片段,我的表现与其他人完全一样,只是我试图在悬停时这样做。它似乎仍然可以在悬停上工作,但是它只是显示该框而不会呈现该图标。
我已经在Font Awesome网站上阅读了多次,这里在多个线程中得到了回答,但仍然无法获得相同的结果。
代码如下:
#home-page-cta-1 span {
transition: filter .5s ease-in-out;
}
#home-page-cta-1 span:hover:before {
content: "\f13d";
font-family: 'Font Awesome 5 Free';
font-size: 100px;
font-style: normal;
text-rendering: auto;
font-variant: normal;
font-weight: 900;
visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-
mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="home-page-cta-1">
<a href="/gallery/">
<span class="image_wrap">
<img src="http://www.southbayfishery.com/wp-content/uploads/2018/09/Fishing-Netting.jpg" alt="">
</span>
</a>
</div>
到头部。
我去过:
Font Awesome shows square instead of icon when used directly in CSS
https://fontawesome.com/v4.7.0/accessibility/
Font awesome unicode not working version 5
一切都按预期工作,例如调整大小,悬停效果,滤镜,动画……但我只是无法获得该死的图像进行渲染。诀窍是什么?谢谢堆栈溢出!