字体真棒5伪类无法与我的套件一起使用 [英] Font awesome 5 pseudo-class not working with my kit
问题描述
注意：我尚未在此处添加套件编号
我正在使用Font awesome5。登录后获得套件脚本在字体真棒poral。我的问题是，如果我在下面的代码中添加
<！doctype html>
< html>
< head>
<！-将您套件的代码放在此处->
< script src = https://kit.fontawesome.com/kitnumber.js crossorigin = anonymous>< / script>
< / head>
< body>
< i class = fas fa-thumbs-up fa-5x< / i>
< / body>
< / html>
然后我得到了我的图标，但是如果我使用伪类，那么我就没有得到图标。
<！doctype html>
< html>
< head>
<！-将您套件的代码放在此处->
< script src = https://kit.fontawesome.com/kitnumber.js crossorigin = anonymous>< / script>
< style type = text / css>
.f_icon：after {
content： \f164;
字体家族： Font Awesome 5 Free；
字体粗细：900;
显示：inline-block;
头寸：绝对；
最高：30％；
}
< / style>
< / head>
< body>
< div class = f_icon>< / div>
< / body>
< / html>
但是如果我在没有工具包的情况下添加了很棒的CSS，那么上面的代码就可以工作了。
更新（2020年3月24日）：此错误已从版本5.13开始修复。
您需要更正字体系列，以考虑使用 Font Awesome 5 Pro code>
<！doctype html>< html> < head> <！-将套件的代码放在这里-> < script src = https://kit.fontawesome.com/97446b8f60.js crossorigin = anonymous< / script> < style type = text / css> .f_icon：after {content： \f164;字体家族： Font Awesome 5 Pro；字体粗细：900； }< / style> < / head> < body> < div class = f_icon>< / div> < / body>< / html>
是尚未修复的已知错误（
您会注意到图标不同：
<！doctype html>< html> < head> <！-将套件的代码放在这里-> < script src = https://kit.fontawesome.com/97446b8f60.js crossorigin = anonymous< / script> < style type = text / css> .f_icon：after {content： \f164;字体家族： FontAwesome；字体粗细：900； }< / style> < / head> < body> < div class = f_icon>< / div> < / body>< / html>
如果您检查您可以看到已加载文件的代码：
Note: I haven't added my kit number here
I am using the Font awesome 5. I got kit script after login in the font awesome poral. My issue is, If I added below code
<!doctype html>
<html>
<head>
<!-- Place your kit's code here -->
<script src="https://kit.fontawesome.com/kitnumber.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-thumbs-up fa-5x"></i>
</body>
</html>
then I am getting my icon but if I use pseudo-class then I am not getting the icon.
<!doctype html>
<html>
<head>
<!-- Place your kit's code here -->
<script src="https://kit.fontawesome.com/kitnumber.js" crossorigin="anonymous"></script>
<style type="text/css">
.f_icon:after{
content: "\f164";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
position: absolute;
top: 30%;
}
</style>
</head>
<body>
<div class="f_icon"></div>
</body>
</html>
But the above code is working if I add font awesome css without my kit.
Update (24/03/2020): the bug is fixed starting from the version 5.13
You need to correct the font family to consider the use of Font Awesome 5 Pro
<!doctype html>
<html>
<head>
<!-- Place your kit's code here -->
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
<style type="text/css">
.f_icon:after{
content: "\f164";
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
}
</style>
</head>
<body>
<div class="f_icon"></div>
</body>
</html>
This seems to be a known bug not yet fixed (https://github.com/FortAwesome/Font-Awesome/issues/16054) and your code should work fine when the bug get fixed.
Worth to note that using FontAwesome will also fix your issue because in the settings the V4 is enabled by default
You will notice that the icon isn't the same:
<!doctype html>
<html>
<head>
<!-- Place your kit's code here -->
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
<style type="text/css">
.f_icon:after{
content: "\f164";
font-family: 'FontAwesome';
font-weight: 900;
}
</style>
</head>
<body>
<div class="f_icon"></div>
</body>
</html>
If you inspect the code you can see the loaded files:
这篇关于字体真棒5伪类无法与我的套件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
