所以我试图原型营销页面，我使用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>
但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?
如果你正在使用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;
}
如果你正在使用Maven和Apache Wicket，也要检查以下内容，以尝试解决字体很棒和图标未加载的问题:
例如，如果您已将文件放在以下文件结构中
/src
/main
/java
/your
/package
/css
font-awesome.css
/font
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.svgz
fontawesome-webfont.ttf
fontawesome-webfont.woff
检查1)您是否正确使用包资源保护，以允许正确加载字体文件?
从你的类扩展WebApplication的例子:
@Override
public void init() {
super.init();
get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());
}
检查2)在确保所有字体都正确地传输到Web浏览器后，检查实际传输到Web浏览器的内容，即字体文件的完整性是否发生了变化?比较源目录中的文件和传输到Web浏览器的文件，例如，使用Firefox和DiffDog的Web开发工具栏(用于文件比较)。
特别是如果您正在使用Maven，请注意资源过滤。不要过滤包含/font文件的文件夹-否则它们将被损坏。
来自pom.xml的示例
<build>
<finalName>Your project</finalName>
<resources>
<resource>
<filtering>true</filtering>
<directory>src/main/resources</directory>
</resource>
<resource>
<filtering>false</filtering>
<directory>src/main/java</directory>
<includes>
<include>**</include>
</includes>
<excludes>
<exclude>**/*.java</exclude>
</excludes>
</resource>
</resources>
</build>
在上面的例子中，我们没有过滤src/main/java文件夹，其中包含css和字体文件。
有关二进制数据过滤的更多信息，请参阅文档:
http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html
文档特别警告说:“警告:不要用
像图像一样的二进制内容!这很可能导致输出损坏。
如果您同时拥有文本文件和二进制文件作为资源，则需要
声明两个互斥的资源集。第一个资源集
属性定义要筛选的文件，其他资源集定义
要原封不动地复制文件……”
使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子)，但这行不通。我通过控制台检查，发现服务器返回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文件中的所有字体格式重复此操作。
这对我不起作用，因为我在apache配置中对根目录设置了Allow from none指令。下面是我如何让它工作的……
我的目录结构:
root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html
我的index.html有:
<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">
我选择继续禁止访问我的根目录，而是在我的apache配置中为root/font-awesome/添加了另一个目录条目
<Directory "/path/root/font-awesome/">
Allow from all
</Directory>
打开你的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">
这么多答案，所以我添加了我的工作为我(更改名称，如果你不使用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;
}
必须这样工作
确保你有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>
