Icon Fonts don't appear after build

[rteobaldo]

Hi.

I'm trying import some icon fonts but they don't load after run dev or prod mode.

This is how i'm loading fonts directly on App.vue:

@font-face {
    font-family: element-icons;
    src: url('../assets/fonts/element-icons.eot?t=1472440741');
    src: url('../assets/fonts/element-icons.woff?t=1472440741') format('woff'),url('../assets/fonts/element-icons.ttf?t=1472440741') format('truetype'),url('../assets/fonts/element-icons.svg?t=1472440741#el-icon') format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
  font-family: 'icomoon';
  src:  url('../assets/fonts/icomoon.ttf?y3vv4p') format('truetype'),
    url('../assets/fonts/icomoon.woff?y3vv4p') format('woff'),
    url('../assets/fonts/icomoon.svg?y3vv4p#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

When i save this compiles ok, but when it reloads on page:

If i try change fonts path to another a not found path error raise.
I supose then the path is right.

Is there just some thing i doing wrong?

[egoist]

can you post the log from terminal after running npm run build?

[rteobaldo]

→ yarn prod                                                                                                                                                                          [239367f]
yarn prod v0.20.3
$ webpack --config build/webpack.prod.js 
Hash: 3daeb87435651fb8bf43                                                               
Version: webpack 2.2.1
Time: 11168ms
                 Asset     Size  Chunks                    Chunk Names
    client.d3eb1060.js   249 kB       0  [emitted]         client
    vendor.e04bafc2.js   488 kB       1  [emitted]  [big]  vendor
client.d3eb1060.js.map   1.3 MB       0  [emitted]         client
vendor.e04bafc2.js.map  2.93 MB       1  [emitted]         vendor
            index.html  1.16 kB          [emitted]         
           favicon.ico  27.8 kB          [emitted]         
                 sw.js  7.52 kB          [emitted]         
   [3] ./~/vue/dist/vue.runtime.common.js 162 kB {1} [built]
   [4] ./~/element-ui/lib/utils/dom.js 5.41 kB {1} [built]
   [5] ./~/element-ui/lib/mixins/emitter.js 1.01 kB {1} [built]
  [13] ./~/element-ui/lib/element-ui.common.js 590 kB {1} [built]
  [14] ./~/promise-polyfill/promise.js 6.24 kB {1} [built]
  [15] ./~/vue-router/dist/vue-router.common.js 51.6 kB {1} [built]
  [18] ./~/element-ui/lib/mixins/locale.js 341 bytes {1} [built]
  [19] ./~/element-ui/lib/scrollbar.js 11 kB {1} [built]
  [20] ./~/element-ui/lib/tag.js 3.81 kB {1} [built]
 [131] ./~/throttle-debounce/debounce.js 1.38 kB {1} [built]
 [134] ./client/app.js 613 bytes {0} [built]
 [135] ./client/promise-polyfill.js 83 bytes {0} [built]
 [136] ./client/pwa.js 384 bytes {0} [built]
 [216] ./client/index.js 206 bytes {0} [built]
 [217] multi vue vue-router element-ui promise-polyfill 64 bytes {1} [built]
    + 203 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets: 
  vendor.e04bafc2.js (488 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  client (737 kB)
      vendor.e04bafc2.js
,      client.d3eb1060.js
,
  vendor (488 kB)
      vendor.e04bafc2.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

[rteobaldo]

do you think if a migrate my code to vbuild this will resolve @egoist ?

[dc198689]

I am facing the same problem, e.g: Suppose the font path is correct through the default file-loader

@egoist Any suggestion to let me try ?

[xiaobinwu]

delete webpack.base.js {
test: /.svg$/,
loader: 'raw-loader'
}

[xiaosunJessica]

u can copy the fonts folder from them-default to your theme folder, and instead of import in app.vue