vue iconfont.css,Vue项目中使用iconfontcss，无法显示正确图标。

因为iconfont是全站使用的。所以将fonts文件夹和iconfont.css文件都放在了一级目录lib下。目录结构为：

| lib

--| css

--| fonts

--| iconfont.eot

--| iconfont.woff

--| iconfont.ttf

--| iconfont.css

--| animate.css

--| images

--| js

iconfont.css内配置为：

@font-face {font-family: "iconfont";

src: url('./fonts/iconfont.eot'); /* IE9*/

src: url('./fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('./fonts/iconfont.woff') format('woff'), /* chrome, firefox */

url('./fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

}

.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-diannao:before { content: "\348f"; }

.icon-qianjin:before { content: "\f0075"; }

webpack.base.conf.js配置为

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

},

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test')]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

query: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

query: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

}

]

}

错误情形

审查元素可以看到icon的class被解析。

在当前元素下插入before：content为字符串儿。

.icon-xiangyou:before {

content: "\E649";

}

浏览器解析出现小方框。无法正确显示。

不知道错误出在了哪里。希望可以得到回复。