字体真棒不工作,图标显示为正方形
Con*_*ack 205 css html5 twitter-bootstrap font-awesome
所以我正在尝试原型化营销页面,我正在使用Bootstrap和新的Font 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>
但所有这一切都在一个大广场上呈现.有谁知道会发生什么？
Nab*_*imi 177
你必须有2班,fa班级和标识所需的图标类fa-twitter,fa-search等...
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
- 注意:"版本5中不推荐使用fa前缀.新的默认值是fas solid样式和品牌的fab样式." (5认同)
- 这应该是最好的答案,CSS提供了指向字体文件的正确位置,只要你不移动它们 - 这就是让我爬上墙谢谢你 (3认同)
may*_*ewr 143
根据文档(步骤3),您需要修改提供的CSS文件以指向站点上的字体位置.
- @tutuca:并非每个人都可以使用CDN. (7认同)
- @mayhewr,您的链接未指向文档条目 (6认同)
- 很好的答案,只是为了提供一些额外的信息,您也可以将字体放在css提供的默认路径中,只需打开Font-awesome.css,您将找到以下条目:@ font-face {font-family: 'FontAwesome'; src:url('../ font/fontawesome-webfont.eot？v = 3.2.1'); src:url('../ font/fontawesome-webfont.eot？#iefix&v = 3.2.1') (5认同)
Kum*_*pam 48
用这个
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
我在Amazon Cloudfront CDN上遇到了类似的问题,但是在我开始从maxcdn加载后它得到了解决
- 这假设您希望使用font-awesome的CDN.对于商业生产环境,我不会这样做. (4认同)
Bre*_*818 41
这可能会有所帮助,请检查以确保您没有无意中更改了图标上的字体系列.如果您更改了.fa项目的字体系列:FontAwesome,则不会显示图标.它总是愚蠢而小巧.
希望能帮助别人.
- 答对了!非常感谢.Metro-UI覆盖了font-awesome font-family.我不得不补充一点:.fa {font-family:'FontAwesome'!important; 然后它工作. (9认同)
- 是的 - 这一行应该归咎于(更具体地说,重要的规则):*{font-family:'Source Sans Pro'!important} (2认同)
jon*_*ert 21
如果您使用的是LESS或SASS,请打开font-awesome.less/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;
}
Erg*_*dly 18
打开你的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">
Voj*_*vic 11
我试图用一些以前的解决方案解决同样的问题,但它们在我的情况下不起作用.最后,我在HEAD中添加了这两行,它起作用了:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
sto*_*tom 11
我正在使用这里提到的maxcdn作品Font Awesome 4.3.0链接,
但是要在你的服务器上托管将字体和css放在同一个文件夹中,就像这样
然后只需链接css:
<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
希望帮助某人.
如果您使用的是 5.* 或更高版本，则必须使用
all.css 或 all.min.css
包含 fontawesome.css 不起作用，因为它没有对webfonts文件夹的引用，也没有对 @font-face 或 font-family 的引用
您可以通过在 fontawesome.css 或 fontawesome.min.css 中搜索 font-family 属性的代码来检查这一点
如果您正在使用Maven和Apache Wicket,请检查以下内容以尝试解决Font-Awesome和未加载图标的问题:
如果您已将文件放在以下文件结构中
/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)您是否正确使用Package Resource Guard以便正确加载字体文件？
您的类扩展WebApplication的示例:
@Override
public void init() {
super.init();
get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());
}
检查2)确保所有字体都正确传输到Web浏览器后,检查实际传输到Web浏览器的内容,即字体文件的完整性是否发生变化？使用例如Firefox和DiffDog的Web Developer Toolbar(用于文件比较)比较源目录中的文件和传输到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>
在上面的示例中,我们不会过滤包含css和font文件的文件夹src/main/java.
有关二进制数据过滤的更多信息,请参阅文档:
http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html
特别是文档警告:" 警告:不要过滤带有像图像这样的二进制内容的文件!这很可能会导致输出损坏.如果同时有文本文件和二进制文件作为资源,则需要声明两个互斥的资源集.第一个资源集定义了要过滤的文件,另一个资源集定义了要复制的文件......"
小智 6
您必须有2个类，即fas类和fa类，也许这可以工作：
// Wrong
<i class="fas fa-search"></i>
// Correct
<i class="fa fa-search"></i>
- 没意识到这一点-从v5开始，它们现在需要一个fab类或fas类，而不是fa类。 (2认同)
小智 6
我遇到了这个问题，并仔细地进行了每一步……即使我已经使用FA多年了……然后我才意识到我的邮件css文件中包含以下内容：
* {
font-family: Arial !important;
}
愚蠢的错误，但这将来可能会引爆别人！
截至 2018 年 12 月，我发现使用 bootstrapcdn 上托管的稳定版本 4.7.0 而不是其网站上的字体很棒的 5.xx cdn更容易——因为每次他们升级次要版本时，以前的版本都会中断。
<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
图标是一样的：
<i class="fa fa-facebook"></i>
font-weight: 900;
我在 Font Awesome 5 中遇到了一个不同的问题。对于 FontAwesome 图标，默认字体粗细应该是 900，但对于 span 和 i 标签，我将其覆盖为 400。当我纠正它时，它才起作用。
这是他们 Github 页面中的问题参考，https://github.com/FortAwesome/Font-Awesome/issues/11946