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

其他回答

你必须有2个类,fa类和类识别所需的图标fa-twitter, fa-search,等等…

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

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

引导5更新

注意:“fa前缀在版本5中已弃用。新的默认是fas固态样式和fab品牌样式。”- Terje Solem

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

从他们的Github页面下载整个项目 然后按照他们页面上Default CSS部分中关于将目录移动到项目和在.html文件的HEAD部分中添加链接的其余步骤进行操作

他们的文档的问题是,他们没有指定一个链接,您应该在哪里获得整个字体的副本,并将其放入您的项目中。

使用这个<i class="fa fa-camera-retro" ></i>你还没有定义fa类

我的问题在于

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

在一个

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

tag

我把它放在标签的外面。

我已经从3.2.1更改为4.0.1,文件夹为font,现在称为fonts。

src: url('../font/fontawesome-webfont.eot?v=3.2.1');

src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');