无法加载离子图标的字体

我的文件夹结构：

/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>

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

该页面确实加载了引导程序 4 ，以及 ionicon唯一没有字体的 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

问题是对字体文件的引用。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/.

相关内容

最新更新

热门标签：