elementui引入iconfont

发表于 更新于 阅读次数：

背景

element官方的icon太少

参考

http://blog.csdn.net/b376924098/article/details/78286880#reply

CSS3 @font-face [http://www.w3cplus.com/content/css3-font-face]

过程

  • 去阿里巴巴矢量图，地址;http://www.iconfont.cn/
  • 进入网站登录账户后，新建一个项目
  • 选择一些自己要用到的图标如上图点击购物车按钮添加到购物车。
  • 保存时，以yourprogect-icon命名
  • 并命名一个自己的字体名称，jkkjFontFamily
  • 在iconfont.css添加以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    [class^="jkkj-icon"], [class*=" jkkj-icon"] {
      font-family:"jkkjFontFamily" !important;
      /* 以下内容参照第三方图标库本身的规则 */
      font-size: 18px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    效果类似于下图