所以我试图原型营销页面，我使用Bootstrap和新的字体Awesome文件。问题是，当我尝试使用图标时，所有在页面上呈现的都是一个大正方形。
以下是我如何将文件包含在头部:
<head>
<title>Page Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
</head>
这是我尝试使用图标的一个例子:
<i class="icon-camera-retro"></i>
但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?
必须这样工作
确保你有fontawesome CDN链接在你的页面顶部
fontawesome cdn
确保.fa类没有被赋予另一个font-family属性。当我们给页面中的所有标记一个样式时，通常会发生这种情况。像这样
* {
字体类型:Arial;
｝
而是使用这个
*:没有(.fa) {
字体类型:Arial;
｝
确保你输入的是fontawesome网站上给出的确切的类名。复制粘贴以确保。
如果你正在使用Cloudflare CDN，你可以使用下面的链接标签在你的页面中使用字体awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fa fa-home"></i>
打开你的font-awesome.css
有这样的代码:
@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">
使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子)，但这行不通。我通过控制台检查，发现服务器返回404，文件没有找到。
相对路径导致404:
@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}
绝对路径解决它跨浏览器:
@font-face {
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}
除非迫不得已，否则我不建议你这么做，但这对我来说很管用。当然，您应该对font-awesome.css文件中的所有字体格式重复此操作。
