1

Use svg to create an icon font on iconmoon, name it sell-icon, copy the four files (sell-icon.eot\sell-icon.svg\sell-icon.ttf\sell-icon.woff)in its fonts folder into the common fonts folder, import the style.css file into common/stylus, and change it to stylus. Format (remove parentheses and semicolons) and rename it to icon.styl.

And icon.styl has:

@font-face {
font-family: 'sell-icon';
......
}
......
.icon-keyboard_arrow_right:before {
 content: "\e900";
}

And I want to use it in head.vue

<template>
 ......
 <i class="icon-keyboard_arrow_right"></i>
 ......
</template>

.......
<style lang="stylus" rel="stylesheet/stylus">
 @import "../../common/stylus/mixin"
 .....
 .icon-keyboard_arrow_right
         margin-left: 2px
         line-height: 24px
         font-size: 10px
 </style>

But unlucky, icon-keyboard_arrow_right does not appear in my web page.It seems nothing wrong in my code.

Who can help me?

stack
  • 821
  • 1
  • 15
  • 28

0 Answers0