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

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


当前回答

如果你通过包管理器(yarn或npm)安装了font-awesome,请注意安装的是哪个版本。或者,如果你很久以前就安装了font-awesome,检查一下安装的版本。

本质上,通过包管理器安装的版本可能落后于https://fontawesome.com/网站上显示的版本。因此,今天(2019年6月21日)包管理器将安装v4.7.0作为最新版本,但网站将指向v5.*的文档。

解决方案,访问v4.7.0的图标文档网站https://fontawesome.com/v4.7.0,复制适当的图标,例如<i class="fa fa-sign-in" aria-hidden="true"></i>,并将其合并到您的html中。更多信息可以在这里找到。

其他回答

如果你正在使用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;
}

如果你使用sass并且已经导入了main.scss @ import“. . /供应商/ font-awesome / scss / font-awesome.scss”;

错误可能来自字体-awesome。查找相对路径中的字体文件的SCSS文件。

所以记得重写$fa-font-path变量: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !

这样就不需要在index.html中添加CDN

我的问题在于

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

在一个

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

tag

我把它放在标签的外面。

在我的例子中,我只是复制

<i class="fa-solid fa-tags"></i> //provided by font awesome

对于现有的前端模板,包括一些其他图标从字体真棒,但这没有工作,所以通过添加'fas'类,它工作;

<i class="fas fa-solid fa-tags"></i> //working

必须这样工作

确保你有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>