我使用字体很棒,不希望添加CSS与HTTP。我下载了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>
我想知道如何使图标显示而不是边框方框。
在我的例子中,我在css代码中犯了以下错误。
*{
font-family: 'Open Sans', sans-serif !important;
}
这将覆盖整个页面的所有字体系列规则。我的解决方案是像这样将代码移动到正文中。
body{
font-family: 'Open Sans', sans-serif;
}
注意:每当在css中使用!importity
标志时,在同一元素上声明的任何其他相同类型的css规则都将被覆盖。
打开font-awesome.min.css
时,可以看到以下路径:
'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...
这意味着您必须创建目录fonts
,然后将文件fontawesom-webfont.ttf
(fontawesom-webfont.woff
,fontawesom-webfont.eot
)复制到此文件夹。在那之后,一切都应该运转良好。