首页 文章

字体真棒不工作，图标显示为正方形

提问于
浏览 次
164

所以我正在尝试原型化营销页面，我正在使用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>

但所有这一切都在一个大广场上呈现 . 有谁知道会发生什么？

css html5 twitter-bootstrap font-awesome

29 回答

  • 9

    我有这个问题并仔细检查了每一步......即使我已经使用FA多年了......然后我意识到我在我的邮件css文件中有这一行：

    * {
font-family: Arial !important;
}

    愚蠢的错误，但这可能会在将来给某人带来惊喜！

    回复于
  • 124

    您必须为您的字体文件返回 Headers Access-Control-Allow-Origin 至 *****

    回复于
  • 3

    我有这个问题 . 问题是我有一个字体系列的CSS样式！重要的是覆盖了fontawesome字体 .

    回复于
  • 1

    我尝试了上面的一些建议没有成功 .

    我使用NuGeT包 . 是（由于某种原因）多个命名版本（font-awesome，fontawesome，font.awesome等）

    为了它的 Value ：我删除了所有已安装的版本，然后只安装了最新版本的 font.awesome . font.awesome 刚刚工作，无需调整或配置任何东西 .

    我假设其他命名版本中缺少许多东西 .

    回复于
  • 0

    它不适合我，因为我的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">

    我选择继续禁止访问我的root，而是在我的apache配置中为root / font-awesome /添加了另一个目录条目

    <Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
    回复于
  • 29

    我已经从3.2.1更改为4.0.1，文件夹是字体，现在称为字体 .

    src：url（'../ font / fontawesome-webfont.eot？v = 3.2.1'）;

    src：url（'../ fonts / fontawesome-webfont.eot？v = 4.0.1'）;

    我希望它对某人有帮助 .

    回复于
  • 0

    我今天找到了一个解决方案：

    • 从他们的Github下载整个项目page

    • 然后按照默认CSS部分下的page上的其余步骤，将目录移动到项目中，并在.html文件的HEAD部分添加链接

    他们的文档存在的问题是，他们没有指定一个链接，指向您应该获得要放入项目的整个字体 - 真棒项目的副本 .

    回复于
  • 1

    这在新版本3.0中应该更简单 . 最简单的是指向Bootstrap CDN：http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

    回复于
  • 16

    打开你的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">
    回复于
  • 21

    我的问题是添加了

    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">

    在里面

    <!-- build:css assets/styles/main.css -->
<!-- endbuild -->

    标签

    我把它放在标签外面来修理它 .

    回复于
  • 4

    与上层阶级一起使用

    <div class="container">
  <i class="fa fa-facebook"></i>
</div>
    回复于
  • 1

    根据documentation（步骤3），您需要修改提供的CSS文件以指向站点上的字体位置 .

    回复于
  • 2

    使用绝对路径而不是相对路径为我解决了它 . 我正在使用相对路径（参见下面的第一个示例），但这不起作用 . 我通过控制台检查，发现服务器返回404，找不到文件 .

    Relative path caused a 404:

    @font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

    Absolute path solved it cross browser:

    @font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

    除非你必须，否则我不建议这样做，但它对我有用 . 当然，你应该对font-awesome.css文件中的所有字体格式重复这一点 .

    回复于
  • 0

    为我（在我的Windows 7机器上）修复问题的原因是解密我的项目目录 . 在测试您的网站时，最初会出现多少视觉和功能故障，这很疯狂 . 只需转到命令提示符并运行：

    attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

    ...其中％PROJECT_PATH％是存储代码的目录的完整路径名 .

    回复于
  • 0

    我使用Official Font Awesome SASS Ruby Gem并通过将以下行添加到我的application.css.scss来修复错误

    @import "font-awesome-sprockets";

    说明：

    font-awesome-sprockets文件包含sprockets assest helper Sass函数，用于查找字体文件的正确路径 .

    回复于
  • 11

    用这个

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    我在Amazon Cloudfront CDN上遇到了类似的问题，但是在我开始从maxcdn加载后它得到了解决

    回复于
  • 0

    如果您正在使用 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

    Check 1) 您是否正确使用Package Resource Guard以便正确加载字体文件？

    您的类扩展WebApplication的示例：

    @Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

    Check 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

    特别是文档警告：“警告：不要使用像图像这样的二进制内容过滤文件！这很可能导致输出损坏 . 如果你有无论是文本文件还是二进制文件作为资源，都需要声明两个互斥的资源集 . 第一个资源集定义了要过滤的文件，另一个资源集定义了要复制的文件......“

    回复于
  • 158

    你必须有2个类，fas类和fa类，也许这会工作：

    // Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>
    回复于
  • 6

    如果您的服务器是IIS，请确保添加正确的MIME以提供.woff文件扩展名 . 正确的MIME是 application/octet-stream

    回复于
  • 2

    我正在使用 Font Awesome 4.3.0 只是链接 maxcdn works 如上所述here，

    但是 to host in your server 把字体和css放在同一个文件夹中对我有用，就像这样

    enter image description here

    然后只需链接css：

    <link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

    希望帮助某人 .

    回复于
  • 3

    如果您使用sass并已在main.scss中导入 @import '../vendor/font-awesome/scss/font-awesome.scss';

    该错误可能来自font-awesome.scss文件，该文件正在查找其相对路径中的字体文件 .

    所以 remember 覆盖$ fa-font-path变量： $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

    像这样，不需要在index.html中添加cdn

    回复于
  • 2

    仔细检查fontawesome-all.css文件 - 在最底部将有一个指向webfonts文件夹的路径 . 我的中有“../webfonts”格式，这意味着css文件将从它的位置向上看1级 . 由于我的所有css文件都在css文件夹中，并且我将字体添加到同一文件夹，因此无效 .

    只需将您的字体文件夹移动到一个级别，一切都应该很好:)

    用Font Awesome 5.0测试

    回复于
  • -1

    如果您使用的是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;
}
    回复于
  • 2

    您的字体路径可能不正确，因此css无法加载字体并呈现图标，因此您需要提供附加字体的搁浅路径 .

    @font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
    回复于
  • 0

    我尝试用一些以前的解决方案解决同样的问题，但它们在我的情况下不起作用 . 最后，我在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">
    回复于
  • 0

    使用此 <i class="fa fa-camera-retro" ></i> 您尚未定义fa类

    回复于
  • 0

    现在，在fontawesome 5中，您可以通过Https提供JS的缓存版本 .

    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

    有关https://fontawesome.com/get-started/svg-with-js的更多信息

    回复于
  • 6

    你必须有2个类， fa 类和标识所需图标 fa-twitter ， fa-search 等的类......

    <!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
    回复于
  • 38

    这可能有帮助， check to ensure that you haven't inadvertently changed the font family 在图标上 . 如果您更改了.fa项目's font family from: FontAwesome the icon will not show. It' s总是傻小的 .

    希望能帮助别人 .

    回复于

相关问题