代码之家 › 专栏 › 技术社区 › rook99

无法加载图标的字体

ionicons laravel-mix sass webpack

rook99 · 技术社区 · 6 年前

我的文件夹结构:

/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');

应用程序。scss:

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

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

现在,我有一个 HTML 归档距离文件夹“index.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

该页面会加载引导程序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

1 回复 | 直到 6 年前

muecas 6 年前

问题在于对字体文件的引用。相关文件被称为 css (比如 @import , background-image ,以及其他类型的文件引用(例如web字体的源文件)与 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/ .

推荐文章

WKrooshof · Web包找不到(字体)依赖项

6 年前

Fredrik · 胸围缓存搭配Laravel混搭

6 年前

Imran Ahmed · 如何在CSS中为Laravel Mix中的图像和字体保留相对路径

6 年前

shukshin.ivan · 如何使用laravel mix缩小css文件?

7 年前

Chris · $(...).使用Laravel Mix时,DataTable不是函数

7 年前

Duc Trung Mai · Workbox:生成项目时无法缓存所有文件

7 年前

GatesPlan · Laravel Mix-未找到依赖项(用于自定义js文件)

7 年前

flap152 · 在laravel宅地上运行“npm run dev”时出错(es2015未找到)

7 年前

murribu · VueJS路由器“无法装载组件:未定义模板或渲染函数。”

7 年前

Lluís Puig Ferrer · 使用node\u modules/.bin/webpack时无法读取未定义(mix.initialize())的属性

7 年前