jquery - 切换类：在不显示字体图标之前

Question

我正在尝试在 pyseduo 之前使用 :before 两个类。一旦目标类悬停，2类交换。在 safari 中工作正常，但在其他浏览器中，底部的图标不显示。它只显示悬停状态图标。切换类是否支持淡入淡出或过渡以缓慢交换类？

CSS：

.play{
    height:30px;
    width: 30px;
    color: rgba(62, 173, 236,0.7);
    bottom:0.2em;
    left:46.7%;
    position: absolute;
    display: inline-block;
}
.play:before{
    content: '\f04b';
    font-family: "Font Awesome 5 Free"; 
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.pause{
    display: inline-block;
    height:30px;
    width: 30px;
    color: rgba(62, 173, 236,0.7);
    bottom:.6em;
    left:46.7%;
    position: absolute;
}
.pause:before{
        content: '\f28b';
    font-family: "Font Awesome 5 Free"; 
    font-size:27px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

jQuery

$('.platform_Slide').hover(function() {
$('.play').toggleClass('pause');

});

https://jsfiddle.net/kjs7gpz6/5/

标签： jquerycss

Answer 1

对于实体图标，添加：

font-weight: 900;

https://jsfiddle.net/eanz7fxg/