null
function mutevideo(evt) {
if (evt.target.classList.contains('fa-video-camera')) {
evt.target.classList.remove('fa-video-camera')
evt.target.classList.add('fa-video-camera:after') // need here above fontawesom class with slash
} else {
evt.target.classList.remove('fa-video-camera:after') // need here above fontawesom class with slash
evt.target.classList.add('fa-video-camera')
}
}.fa-video-camera:after {
position: absolute;
content: "/";
color: white;
font-weight: 900;
font-size: 20px;
left: 10px;
top: 7px;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<p class="bg-white text-danger rounded-circle"><i onClick=mutevideo(evt) class="fa fa-video-camera p-2 fa-1x"></i></p>null
问题:-
在FontaWesome4.7版本中，它不像5.x版本中那样有斜杠视频，所以这里我用:after编写了我自己的css来实现这一点，现在我如何在页面加载后立即获得视频斜杠，但我的要求是我需要在我点击后对图标进行斜杠。
注:-
这里我使用的是FontaWesom4.7版本，任何帮助或建议都衷心感谢
您可以简单地使用一个自定义类.stop来在您的字体图标中添加一个斜杠。 不需要再添加一个图标来添加斜杠。
要在单击时显示和隐藏，我们可以简单地使用toggle（）函数，而不是执行大量的if's和else或add或remove类
运行下面的代码段。
null
function mutevideo(evt) {
if (evt.classList.contains('fa-video-camera')) {
evt.classList.toggle('stop')
}
}.stop:after {
position: absolute;
content: "/";
color: white;
font-weight: bold;
font-size: 23px;
left: 11px;
top: 12px;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p class="bg-white rounded-circle"><i onClick=mutevideo(this) class="fa fa-video-camera p-2 fa-1x"></i></p>