Невозможно загрузить шрифты в проекте Laravel 5.7 и Vue 2 с помощью Element UI и iView UI Toolkit

Недавно я установил laravel v5.7 и vue 2. Затем я установил Element UI и iView UI Toolkit, все работает отлично, но все, что использует значки в любом компоненте iView UI, показывает квадратные блоки, но я хочу, чтобы результат выглядел как документацию, где i предупреждение имеет значок. Я искал и пробовал много решений, но ни один из них не работал, например)

Что я сделал до сих пор

  1. Редактирование файла .htaccess в соответствии с этой статьей < / а>
  2. Установлен Laravel Cors.
  3. Подтверждено, что шрифты существуют в "/ fonts / vendor / iview / dist / styles" после запуска npm run watch
  4. Очистил мой кеш, историю, все. 5) Проверено, что на файл css ссылаются правильно. 6) Проверено, что CSS правильно ссылается на шрифты. Вот фрагмент файла css.
  5. Тестировал приложение в Chrome, Firefox и Opera, та же проблема

@font-face{font-family:Ionicons;src:url(/fonts/vendor/iview/dist/styles/ionicons.ttf?f3b7f5f07111637b7f12c1a4d499d056) format("truetype"),url(/fonts/vendor/iview/dist/styles/ionicons.woff?39f116d33948df9636a310075244b857) format("woff"),url(/fonts/vendor/iview/dist/styles/ionicons.svg?3f5fdc44d1e78a861fee03f2d8a59c60#Ionicons) format("svg");

Что у меня в app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

import Vue from 'vue'
import App from './App.vue';

//  Global event manager, to emit changes/updates
//  such as when user has logged in e.g) auth.js
window.Event = new Vue;

//  Import Element UI Kit
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

//  Import IView UI Kit
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

//  Import Vue Router for custom routes and navigation
import VueRouter from 'vue-router';
import router from './routes.js';

Vue.use(VueRouter)

const app = new Vue({
  el: '#app',
  //  Render the main app view
  render: h => h(App),
  //  For our custom routes
  router
});

Фрагмент того, что у меня есть в шаблоне vue

<template>
    <el-row :gutter="20">

        <Alert show-icon>An info prompt</Alert>
        <Alert type="success" show-icon>A success prompt</Alert>
        <Alert type="warning" show-icon>A warning prompt</Alert>
        <Alert type="error" show-icon>An error prompt</Alert>
        <Alert show-icon>
            An info prompt
            <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
        </Alert>
        <Alert type="success" show-icon>
            A success prompt
            <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
        </Alert>
        <Alert type="warning" show-icon>
            A warning prompt
            <template slot="desc">
            Content of prompt. Content of prompt. Content of prompt.
        </template>
        </Alert>
        <Alert type="error" show-icon>
            An error prompt
            <span slot="desc">
                Custom error description copywriting.
            </span>
        </Alert>
        <Alert show-icon>
            Custom icon
            <Icon type="ios-bulb-outline" slot="icon"></Icon>
            <template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. </template>
        </Alert>
    </el-row>

</template>

<script>
    export default {
        data(){
            return {
                
            }
        }
    }
</script>

Страница после обновления - вкладка "Сеть"

Компоненты загружены, но значки шрифтов нет

Страница после обновления - вкладка журнала консоли

Журнал консоли

Страница после обновления - вкладка "Элементы", CSS, который вытягивает шрифты.

введите здесь описание изображения

Папка шрифтов

введите здесь описание изображения

Что я заметил.

Самое смешное, что, похоже, работают только шрифты Element UI. Я также попытался установить отличные шрифты, но безуспешно.

ДРУГИЕ ВАЖНЫЕ ЗАМЕЧАНИЯ

  1. Я разрабатываю на виртуальном хосте
  2. Я разрабатываю в автономном режиме с помощью xammp

person Julian Tabona    schedule 25.11.2018    source источник


Ответы (1)


Нашел проблему. Это было связано с одной из моих таблиц стилей. Я нашел этот код: html, *, body { font-family: 'Helvetica', 'Arial', 'sans-serif' !important; font-weight: 400; font-size: 12px; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } Проблема заключалась в "html, *, body": { font-family: 'Helvetica', 'Arial', 'sans-serif' !important; } части. Если вы заметили, что семейство шрифтов применяется ко всему, я думаю, оно заменяет даже мои ссылки на значки. Когда я удалил это. Иконки снова начали отображаться.

введите здесь описание изображения

person Julian Tabona    schedule 27.11.2018