无法加载 ionicons 字体答案

【问题标题】：Cant load ionicons's fonts无法加载 ionicons 字体
【发布时间】：2018-05-20 04:04:41
【问题描述】：

我的文件夹结构：

/dist
    index.html
    /css
        app.css
    /js
        app.js  
    /fonts
        /vendor
            /ionicons
                /dist
                    ionicons.eot
                    ionicons.svg
                    ionicons.ttf
                    ionicons.woff
                    ionicons.woff2
    /node_modules..             
    /src
        /assets
                /js
                    app.js
                /sass
                    app.scss

网页包：

let mix = require('laravel-mix');
mix.setPublicPath('dist');

mix.js('src/assets/js/app.js', 'dist/js')
   .sass('src/assets/sass/app.scss', 'dist/css');

app.scss：

// Bootstrap
@import '~bootstrap/scss/bootstrap';

//ionicons
$ionicons-font-path: "~ionicons/dist/fonts";
@import '~ionicons/dist/scss/ionicons';

现在，我在 dist 文件夹 "index.html"

中有一个 HTML 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>example</title>
    <link rel="stylesheet" href="./css/app.css">
</head>

<body>
 <div id="example">
     Hello!
    <i class="icon ion-md-heart text-white"></i>
 </div>
    <script src="./js/app.js"></script>
</body>

</html>

当我使用 chrome 打开它时：file:///D:/Projects/exampleproject/dist/index.html

页面确实加载了 bootstrap 4 和 ionicons 的 只有没有字体的 css！它向我展示了这一点：

ionicons.woff2:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
ionicons.woff:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
ionicons.ttf:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

【问题讨论】：

您不能简单地在浏览器中运行 .html 文件，您需要一个服务器来提供这些资产。

标签： webpack sass laravel-mix ionicons

【解决方案1】：

问题是对字体文件的引用。在css 中调用的相关文件（如@import、background-image 和其他类型的文件引用，例如网络字体的源）与加载css 文件的文件夹相关。

因此，在您的情况下，为了正确加载字体文件，需要相对于 /dist/css 引用它们，因此您应该将字体文件的源路径更改为 ../fonts/vendor/ionicons/dist/：

$ionicons-font-path: '../fonts/vendor/ionicons/dist/fonts";
@import '~ionicons/dist/scss/ionicons';

或者，如果您在 Web 服务器中运行您的项目，您可以简单地从您的文档根目录中引用这些文件。在这种情况下，您可以使用/fonts/vendor/ionicons/dist/。

【讨论】：