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

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


当前回答

对于字体文件,必须将标题Access-Control-Allow-Origin返回为*

其他回答

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

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

粗细:900;

我在Font Awesome 5上遇到了不同的问题。 对于fontaweesome图标,默认的字体重量应该是900,但对于span和I标签,我将其重写为400。 当我纠正它的时候,它就起作用了。

这是他们Github页面上的问题参考,https://github.com/FortAwesome/Font-Awesome/issues/11946

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

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

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

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

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