title: Cannot load fonts in Laravel 5.7 & Vue 2 project using Element UI & iView UI Toolkit
body: <p>I recently installed laravel v5.7 and vue 2. I then installed <a href="http://element.eleme.io" rel="nofollow noreferrer">Element UI</a>
  and <a href="https://www.iviewui.com/" rel="nofollow noreferrer">iView UI Toolkit</a>, everything works perfectly, but anything that uses icons in any iView UI component shows square blocks, but i want the result to look like the <a href="https://www.iviewui.com/components/alert-en" rel="nofollow noreferrer">documentation</a> where i the alert has an icon. I have searched and tried many solutions but none worked e.g)</p>
  
  <blockquote>
    <p>What I've done so far</p>
  </blockquote>
  
  <ol>
  <li>Editting the .htaccess file according to this <a href="https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts" rel="nofollow noreferrer">article</a></li>
  <li>Installed <a href="https://github.com/barryvdh/laravel-cors" rel="nofollow noreferrer">Laravel Cors</a></li>
  <li>Confirmed that the fonts exist in <strong>"/fonts/vendor/iview/dist/styles"</strong> after running <strong>npm run watch</strong></li>
  <li>Cleared my cache, history, everything.
  5) Checked that the css file is being referenced properly.
  6) Checked that the css if referencing the fonts properly. Here is a snippet of the css file.</li>
  <li>Tested the application on Chrome, Firefox and Opera, same issue</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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");</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>What i have in app.js</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/**
   * 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 =&gt; h(App),
    //  For our custom routes
    router
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>A snippet of what i have in the vue template</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;el-row :gutter="20"&gt;
  
          &lt;Alert show-icon&gt;An info prompt&lt;/Alert&gt;
          &lt;Alert type="success" show-icon&gt;A success prompt&lt;/Alert&gt;
          &lt;Alert type="warning" show-icon&gt;A warning prompt&lt;/Alert&gt;
          &lt;Alert type="error" show-icon&gt;An error prompt&lt;/Alert&gt;
          &lt;Alert show-icon&gt;
              An info prompt
              &lt;template slot="desc"&gt;Content of prompt. Content of prompt. Content of prompt. Content of prompt. &lt;/template&gt;
          &lt;/Alert&gt;
          &lt;Alert type="success" show-icon&gt;
              A success prompt
              &lt;span slot="desc"&gt;Content of prompt. Content of prompt. Content of prompt. Content of prompt. &lt;/span&gt;
          &lt;/Alert&gt;
          &lt;Alert type="warning" show-icon&gt;
              A warning prompt
              &lt;template slot="desc"&gt;
              Content of prompt. Content of prompt. Content of prompt.
          &lt;/template&gt;
          &lt;/Alert&gt;
          &lt;Alert type="error" show-icon&gt;
              An error prompt
              &lt;span slot="desc"&gt;
                  Custom error description copywriting.
              &lt;/span&gt;
          &lt;/Alert&gt;
          &lt;Alert show-icon&gt;
              Custom icon
              &lt;Icon type="ios-bulb-outline" slot="icon"&gt;&lt;/Icon&gt;
              &lt;template slot="desc"&gt;Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. &lt;/template&gt;
          &lt;/Alert&gt;
      &lt;/el-row&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data(){
              return {
                  
              }
          }
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>Page after refresh - Network Tab</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/tIyfh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tIyfh.png" alt="The components loaded but font icons did not"></a></p>
  
  <blockquote>
    <p>Page after refresh - Console log Tab</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/b5ExA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b5ExA.png" alt="Console log"></a></p>
  
  <blockquote>
    <p>Page after refresh - Elements Tab, the css that is pulling the fonts</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/GsAgi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GsAgi.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>The font folder</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/IQrmC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IQrmC.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>What i noticed.</p>
  </blockquote>
  
  <p>The funny thing is that only the Element UI fonts seems to work. I also tried installing font-awesome fonts, and had no success. </p>
  
  <p><strong>OTHER IMPORTANT NOTES</strong></p>
  
  <ol>
  <li>I'm developing on Virtual Host</li>
  <li>I'm developing offline using xammp</li>
  </ol>