我最近安装了 laravel v5.7 和 vue 2。然后我安装了Element UI 和iView UI Toolkit，一切正常，但是在任何 iView UI 组件中使用图标的任何东西都会显示方块，但我希望结果看起来像文档i 警报有一个图标。我已经搜索并尝试了许多解决方案，但没有一个有效，例如）
到目前为止我所做的
- 根据本文编辑 .htaccess 文件
- 安装Laravel Cors
- 运行npm run watch后确认“/fonts/vendor/iview/dist/styles”中存在字体
- 清除了我的缓存，历史记录，一切。5) 检查 css 文件是否被正确引用。6) 检查 css 是否正确引用了字体。这是css文件的片段。
- 在 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 字体有效。我还尝试安装 font-awesome 字体，但没有成功。
其他重要说明
- 我正在虚拟主机上开发
- 我正在使用 xammp 进行离线开发
