使用iconfont图标字体

// 动态插入css
export const loadStyle = url => {
  const link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet';
  link.href = url;
  const head = document.getElementsByTagName('head')[0];
  head.appendChild(link);
};

引用在线的iconfont生成的css

// 支持同时引入多个iconfont生成的css链接
const iconfontUrls = ['xxx'];
const iconfontBaseUrl = `https://at.alicdn.com/t/font_$key.css`;
iconfontUrls.forEach(ele => {
  // 动态创建链接 插入css
  loadStyle(iconfontBaseUrl.replace('$key', ele));
});

将iconfont生成的链接 //at.alicdn.com/t/font_2507077_2eg84bzwc0r.css（黄色标注的） 中的放入iconfontUrls中。

每次iconfont上字体图标改动或者产生新的图标需要将新生成的css地址替换到代码中。

在项目的css入口文件中设置字体库的基本样式

[class*='ifont-'] {
  font-family: 'iconfont' !important;
  font-size: inherit;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

font-family为字体库的图标名，需要到项目中单独设置，不建议使用iconfont自己默认生成的font-family对应的图标名。


使用：

[class*='ifont-wid-'] {
  font-family: 'iconfont-wid' !important;
  font-size: inherit;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}