The external file iconfont is introduced into vue.js, but the icon does not display

clipboard.png

css/new-anviz-fonts.css


clipboard.png

The

icon shows only one square? What"s the reason? solve it! Thank you!

Aug.10,2021

recommends using Ali's iconfont, and using online fonts. No longer care about the path problem, the icon is not complete.


path is wrong, yours is also a relative path, absolute path you want to use the address with http


you should put the font file in the static folder under public, and use url (/ static/.). The font file does not need to be recompiled, the file placed in the public folder will be packaged intact, while the file placed in the asset folder will be compiled by webpack as a module.


finally found two reasons:

  1. path
  2. introduce

path
icon file and style file are placed in the same directory assets/fonts:

@font-face {
  font-family: 'icon';
  src:  url('icon.eot?btu5gk');
  src:  url('icon.eot?btu5gk-sharpiefix') format('embedded-opentype'),
    url('icon.ttf?btu5gk') format('truetype'),
    url('icon.woff?btu5gk') format('woff'),
    url('icon.svg?btu5gk-sharpicon') format('svg');
  font-weight: normal;
  font-style: normal;
}

clipboard.png


main.js import


:

clipboard.png

Menu