Cannot load fonts in Laravel 5.7 & Vue 2 project using Element UI & iView UI Toolkit

Question

I recently installed laravel v5.7 and vue 2. I then installed Element UI and iView UI Toolkit, 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 documentation where i the alert has an icon. I have searched and tried many solutions but none worked e.g)

What I've done so far

1. Editting the .htaccess file according to this article
2. Installed Laravel Cors
3. Confirmed that the fonts exist in "/fonts/vendor/iview/dist/styles" after running npm run watch
4. 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.
5. Tested the application on Chrome, Firefox and Opera, same issue

@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");

What i have in 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
});

A snippet of what i have in the vue template

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

Page after refresh - Network Tab

Page after refresh - Console log Tab

Page after refresh - Elements Tab, the css that is pulling the fonts

The font folder

What i noticed.

The funny thing is that only the Element UI fonts seems to work. I also tried installing font-awesome fonts, and had no success.

OTHER IMPORTANT NOTES

1. I'm developing on Virtual Host
2. I'm developing offline using xammp

Answer 1

Found the problem. It had to do with one of my style sheets. I found this code: html, *, body { font-family: 'Helvetica', 'Arial', 'sans-serif' !important; font-weight: 400; font-size: 12px; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } The issue was the "html, *, body": { font-family: 'Helvetica', 'Arial', 'sans-serif' !important; } part. If you notice the font family is applied to everything, i guess it then replaces even my icon references. When i removed that. The icons started showing again.