Question

我正在通过CDN使用Font Awesome 5.3.1。在Chrome浏览器中，当您使用标准方法时，图标会正确加载，但从CSS引用时，图标不会加载。我已经看到很多其他人在Font Awesome和Chrome上遇到了问题，但是我见过的任何解决方案都不适合我，也不能为我工作。我尝试将其放在我的.htaccess文件中：

<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

，但没有任何效果。也许这对我来说都不适用，因为我自己没有托管字体文件。

以下是在Chrome中有效和无效的示例：

<!doctype html>
<html>
<head>
    <title>Font Awesome Problem</title>
    <meta charset="utf-8" />

    <!-- FONT AWESOME -->
    <script>FontAwesomeConfig = { searchPseudoElements: true }</script>
    <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" rel="stylesheet" >

    <style type="text/css">
        .foo::before {
            font-family: "Font Awesome 5 Free";
            content: "\f00c";
            padding-right: 5px;
        }
    </style>
</head>
<body>
    <i class="fas fa-check"></i> This checkmark was placed using the basic &lt;i&gt; tag method.

    <p class="foo">This checkmark was placed before the p tag with CSS.</p>
</body>

在某些情况下，字体真棒无法在Chrome中加载图标

0 个答案: