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

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


当前回答

你必须有两个类,fas类和fa-*类。参考文档中的基本用法:

fa前缀在版本5中已弃用。新的默认是fas实体样式和fab品牌样式。

// Correct (version >= 5)
<i class="fas fa-search"></i>    

// Wrong (version < 5)
<i class="fa fa-search"></i>

其他回答

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

/css/all.css文件包含核心样式和所有图标样式,当你使用字体Awesome时需要。/webfonts文件夹包含了上面CSS引用和依赖的所有字体文件。

复制整个/webfonts文件夹和/css/all.css到你的项目的静态资产目录(或任何你喜欢保留前端资产或供应商的东西)。

将复制的/css/all.css文件的引用添加到你想要使用字体Awesome的每个模板或页面。

只需访问- https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 你会得到答案的。

使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子),但这行不通。我通过控制台检查,发现服务器返回404,文件没有找到。

相对路径导致404:

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

绝对路径解决它跨浏览器:

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

除非迫不得已,否则我不建议你这么做,但这对我来说很管用。当然,您应该对font-awesome.css文件中的所有字体格式重复此操作。

我的问题在于

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

在一个

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

tag

我把它放在标签的外面。

从版本5开始,如果您从此站点下载了软件包:

https://fontawesome.com/download

字体在all.css和all.min.css文件中。

这是现在使用最新版本(替换为您的文件夹)的参考文件的样子:

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">