iconfont 的使用方法

iconfont文件放在静态资源assets下面，每次更新更新iconfont 文件夹就可以

页面操作如下 不喜勿喷

<template>
    <div class="main">
        iconfont
        <ul>  cdn远程iconfont
            <li class="iconfont">&#xe70e;</li>
            <li class="iconfont">&#xe70c;</li>
            <li class="iconfont">&#xe70a;</li>
            <li class="iconfont">&#xe707;</li>
            <li class="iconfont">&#xe6e5;</li>          
            <li class="iconfont">&#xe683;</li>
            <li class="iconfont">&#xe600;</li>
        </ul>   
        <ul class="scssColor">  cdn远程+scss--iconfont
            <li class="iconfont">&#xe70e;</li>
            <li class="iconfont">&#xe70c;</li>
            <li class="iconfont">&#xe70a;</li>
            <li class="iconfont">&#xe707;</li>
            <li class="iconfont">&#xe6e5;</li>          
            <li class="iconfont">&#xe683;</li>
            <li class="iconfont">&#xe600;</li>
        </ul>       
        <p class="iconfont ">cdn远程多色小图标：
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shuye6"></use>
            </svg>  
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shuye5"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiachong"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shumu"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiaohua"></use>
            </svg>
        </p>
        <p class="iconfont">cdn远程多色小图标： 
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_8"></use>
            </svg>  
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_5"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_1"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_3"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_9"></use>
            </svg>
        </p>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 477978 */
  src: url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.eot');
  src: url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.eot?#iefix') format('embedded-opentype'),
       url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.woff') format('woff'),
       url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.ttf') format('truetype'),
       url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.svg#iconfont') format('svg');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 26px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

/*多色小图标*/

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

$red: #ff0000;
$orange: #ffa500;
$yellow: #ffff00;
$green: #008000;
$bluegreen: #00ffff;
$blue: #0000ff;
$purple: #800080;
$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;
@for $i from 1 to length($bgcolorlist) +1 {
  .scssColor li:nth-child(#{$i}) {
    color: nth($bgcolorlist, $i);
  }
}
.main {
  text-align: center;
  font-size: 26px;
}
ul {
  text-align: center;
  li {
    font-size: 26px;
  }
}
p {
  margin: 30px;
}
</style>