所以我试图原型营销页面,我使用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>

但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?


当前回答

这对我不起作用,因为我在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">

我尝试了上面的一些建议,但都没有成功。

我使用NuGeT包。 (出于某种原因)有多个命名版本(font-awesome, fontawesome, font。太棒了,等等)。

无论如何: 我删除了所有安装的版本,然后只安装了最新版本的font.awesome。字体。Awesome不需要调整或配置任何东西就可以工作。

我认为在其他已命名的版本中有许多东西是缺失的。

请添加

@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
    font-family: 'FontAwesome';
    src: url('https://****.net/*********/FontAwesome.otf');
    src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}

这到你的css顶部,下载并正确链接css和字体,问题是由于FontAwesome没有正确加载。

谢谢

仔细检查fontawessome -all.css文件-在最底部会有一个webfonts文件夹的路径。我的……“/webfonts”格式,这意味着CSS文件将从它所在的位置往上看一级。由于我所有的css文件都在css文件夹中,我将字体添加到同一个文件夹中,这是行不通的。

只要把你的字体文件夹向上移动一个级别,一切都应该很好:)

用字体Awesome 5.0测试

在(免费的)Font Awesome 5版本中,有一个小细节对我来说很难理解,我没有注意到它:

Style   Availability    Style Prefix    Example Rendering
Solid   Free            fas             <i class="fas fa-camera"></i>
Brands  Free            fab             <i class="fab fa-font-awesome"></i>

(摘自文档)

因此,品牌图标如fa-twitter或fa-react需要与类fab一起使用,而所有其他(免费)图标需要与类fas一起使用。这很容易监管。