Gan*_*esh 78 html css font-awesome
我正在使用Font Awesome并且不希望使用HTTP添加CSS.我下载了Font Awesome并将其包含在我的代码中,但Font Awesome正在显示一个带框的方框而不是图标.这是我的代码:
<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>
我想知道如何制作图标显示而不是带边框的方框.
Dan*_*rde 72
在我的情况下,我在我的CSS代码中犯了以下错误.
*{
font-family: 'Open Sans', sans-serif !important;
}
这将覆盖整个页面的所有字体系列规则.我的解决方案是将代码移动到正文中.
body{
font-family: 'Open Sans', sans-serif;
}
注意:无论何时!important在css中使用该标志,在同一元素上声明的相同类型的任何其他css规则都将被覆盖.
use*_*426 48
打开时,font-awesome.min.css您可以看到以下路径:
'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...
这意味着您必须创建目录Fonts,然后将文件fontawesome-webfont.ttf(fontawesome-webfont.woff,fontawesome-webfont.eot)复制到此文件夹.之后一切都应该工作正常.
小智 33
请注意,字体真棒的新版本(5)使用"fas"或"fab"代替"fa"前缀.
引自他们的网站:
fa前缀在版本5中已被弃用.新的默认值是fas solid样式和品牌的fab样式.
这就是我的字体显示空白方块的原因.现在修好了.
示例代码:
<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>
请参阅:https://fontawesome.com/icons/facebook-f？style = brands
One*_*ion 20
首先,检查你是否有class ="fa"以及图标的类.所以,不只是
<i class="fa-pencil" title="Edit"></i>
但是也
<i class="fa fa-pencil" title="Edit"></i>
然后它按预期工作.这解决了我的问题.
Erg*_*dly 19
打开你的font-awesome.css theres代码,如:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
你必须有像这样的文件夹:
font awesome -> css
-> fonts
或最简单的方法:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Val*_*ier 11
检查CSS文件的路径是否正确.更喜欢绝对链接,它们更容易理解,因为我们知道从哪里开始,搜索引擎也会比相对链接更喜欢它们.并且为了减少带宽而使用来自font-awesome服务器的链接:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">
此外,如果您使用它,则不需要将额外的字体上传到您的服务器,您将确保指向正确的CSS文件,并且您也将立即受益于最新的更新.
小智 11
我正在处理同样的问题，然后我发现我必须使用新版本（5 及以上）
使用这个cdn它会起作用。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
我遇到了同样的问题..所以我没有下载很棒的字体，而是在我的 html 代码中添加了一个链接并且它起作用了。
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>小智 6
这是 v5 的问题，有些图标不适用于旧版本。
这个链接对我有用！
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">