icon的基本使用

icon的基本使用

1. Unicode

1.1 下载iconfont的文件，并且新建名为HeiGesIcon的文件夹放在src下

1.2 将iconfont内的文件放入HeiGesIcon中，
1.3 修改@font-face 里面文件的路径

@font-face {
    font-family: "iconfont";
    src: url('../HeiGesIcon/iconfont.eot'); /* IE9*/
    src: url('../HeiGesIcon/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../HeiGesIcon/iconfont.woff') format('woff'), /* chrome, firefox */
    url('../HeiGesIcon/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../HeiGesIcon/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    
  }
.iconfont {
  font-family:"iconfont" !important;
  font-size:30px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

1.4 在main.js中引入文件

  import './HeiGesIcon/iconfont.css'

1.5 挑选相应图标并获取字体编码，应用于页面

<i class="iconfont icon-iconwaimai1">&#xe635;</i>