Не могу загрузить шрифты иониконов - PullRequest
Новая
       11

Не могу загрузить шрифты иониконов

0 голосов
/ 20 мая 2018

Структура моей папки: 

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

Теперь у меня есть HTML файл внутри dist папка "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, и только 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 Ответ

0 голосов
/ 21 мая 2018

Проблема в ссылке на файлы шрифтов.Связанные файлы, называемые в css (например, @import, background-image и другие ссылки на файлы, такие как источник веб-шрифтов), относятся к папке, из которой загружается файл css.

Таким образом, в вашем случае, для правильной загрузки файлов шрифтов, на них должна быть ссылка относительно /dist/css, поэтому вы должны изменить исходный путь для файлов шрифтов на ../fonts/vendor/ionicons/dist/: 

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

Или, если вы запускаете проект на веб-сервере, вы можете просто ссылаться на файлы из корня вашего документа.В этом случае вы можете использовать /fonts/vendor/ionicons/dist/.

...