0

In my project, I use font-icon.

I have defined icon-close in icon.styl file, here is core code:

@font-face {
font-family: 'sell-icon';
 src:  url('/src/common/fonts/sell-icon.eot?o23a15');
 src:  url('/src/common/fonts/sell-icon.eot?o23a15#iefix') format('embedded-opentype'),
 url('/src/common/fonts/sell-icon.ttf?o23a15') format('truetype'),
 url('/src/common/fonts/sell-icon.woff?o23a15') format('woff'),
 url('/src/common/fonts/sell-icon.svg?o23a15#sell-icon') format('svg');
 font-weight: normal;
 font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts 
 */
 font-family: 'sell-icon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
 }

.icon-keyboard_arrow_right:before {
 content: "\e900";
}
.icon-close:before {
  content: "\e901";
}
.......

And now, I want to use it in head.vue file:

<div class="detail-close">
     <i class="icon-close"></i>
</div>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin"
  @import "../../common/stylus/icon.styl"

But I have got error:

 Failed to decode downloaded font: 
 http://X.X.X.X:8080/src/common/fonts/sell-icon.ttf?o23a15

Who can help me?

stack
  • 821
  • 1
  • 15
  • 28
  • It looks like the path is wrong. [This issue](https://github.com/vuejs-templates/webpack/issues/1284) lokos like it deals with your problem. – Kwesi Jul 23 '18 at 08:09
  • 1
    Step 1: [stop using all these dead font formats and only use actually supported formats](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385). Then revisit your problem. – Mike 'Pomax' Kamermans Jul 28 '18 at 21:12

0 Answers0