字体真棒图标未显示

Question

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

我已经如下初始化了字体真棒CDN

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

但是字体没有显示。

示例Jsfiddle

Answer 1

使用content:''; 用:after或:before伪元素。

content 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>