我试图span直接从CSS页面更改带有Font Awesome图标的a的内容,但似乎无法使其正常工作.
1)我从文档中导入了FA <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2)我的HTML看起来像这样:
<span class='myClass'>Movies</span>
3)现在让我说我想直接从CSS页面用图标更改跨度的内容.
我的css目前看起来像这样,但它不起作用,它给了我一个正方形而不是图标.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>有趣的是,它看起来像是在使用一些图标.如果我测试content: '\f007';它的工作原理.知道为什么吗？
(如果你想知道我为什么要直接在CSS中更改图标,那是因为我正在使用媒体查询,所以我不能直接在HTML页面中添加它)
字体真棒5星图标有<i class="fas fa-star"></i>和<i class="far fa-star"></i>不同是fas , far和两者的Unicode f005现在我想用它作为我的评级系统,其中第一个是常规明星,点击成为实心明星,但我如何fas far在我的CSS中定义这个？
input.star:checked ~ label.star:before {
content: '\f005';
color: #e74c3c;
transition: all .25s;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
label.star:before {
content: '\f005';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
我的代码在上面我只得到坚实的明星