所以我试图原型营销页面，我使用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>
但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?
使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子)，但这行不通。我通过控制台检查，发现服务器返回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文件中的所有字体格式重复此操作。
如果你正在使用LESS或SASS，打开字体-真棒。减少/sass文件，编辑路径变量@fa-font-path: "../font";它指向实际的字体:
@fa-font-path: "../font";
@font-face {
font-family: 'FontAwesome';
src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
与CSS一样，除了你在@font-face声明块中编辑路径:
@font-face {
font-family: 'FontAwesome';
src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
这么多答案，所以我添加了我的工作为我(更改名称，如果你不使用PRO):
在_typography.less
//
// Common
// _____________________________________________
& when (@media-common = true) {
.lib-font-face(
@family-name: @font-family-name__fontawsomeregular,
@font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
@font-weight: 400,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomelight,
@font-path: '@{baseDir}fonts/webfonts/fa-light-300',
@font-weight: 300,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomebrands,
@font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
@font-weight: normal,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomesolid,
@font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
@font-weight: 900,
@font-style: normal
);
}
在_theme.less
@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';
// Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';
用法示例:
.my-newclass:before{
content: '\f002';
display: inline-block;
float: left;
font-family: @font-family-name__fontawsomelight;
font-size: 16px;
}
