Question

我使用了.playpause类的字体真棒图标。

我已经将字体awesome cdn初始化为

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

但字体没有显示。

Example Jsfiddle

Answer 1

将content:'';与:after或:before伪元素一起使用。

内容CSS属性与:: before和:: after一起使用用于在元素中生成内容的伪元素。插入的对象使用content属性是匿名替换元素。

CDN

.playpause:after {
   content:'';
}

video {
    width: 100%;
    object-fit: inherit;
    height: 450px;
}
.video-part{
    margin-top: 10px;
    width:100%;
    display:table;
    position:relative;
}
.playpause:after {
    content: "\f04b";
    color: red;
    font-family: FontAwesome;
    background-repeat:no-repeat;
    width:80px;
    height:80px;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
    z-index:999;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="video-part">
    <video class="video" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThj0RbBbtQjY5QXTbF5SNN33KQ6LXpRWN_mvXyKf4PDbOi3jk7EQ">
        <source src="sources/denvermnts.mp4" type="video/mp4"/>
    </video>
  <div class="playpause"></div>
</div>

字体真棒图标没有显示

1 个答案: