vue项目中引入iconfont

使用时很不友好，使用的是unicode码表示，使用图标还必须去iconfont项目去查询下unicode码。









效果图如下：

本地使用

有时候网络不是那么给力的，或者是内网环境，那么就不要考虑用在线引用的方式了。

1. 本地使用需要先将字体库下载并放到项目中。

2. 在全局样式文件中定义如下代码

@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.woff2’) format(‘woff2’), /* chrome, firefox */

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

url(‘…/assets/fonts/iconfont.svg#iconfont’) format(‘svg’); /* iOS 4.1- */

}

.iconfont {

font-family: “iconfont” !important;

font-size: 16px;

font-style: normal