1. 登陆阿里巴巴icon,新建项目将使用的图标添加至项目

 

2.使用:
在线使用:
<link href="http://at.alicdn.com/t/font_1540206_t8mmj.css" rel="stylesheet">
连接到在线测试的
<i class="icon iconfont iconproductpage-server-icon4"></i>
这样就是在线使用

3.本地使用:
在项目中点击下载到本地
将iconfont.eot
   iconfont.woff2
   iconfont.woff
   iconfont.ttf
   iconfont.svg#iconfont
复制到本地目录
新建css文件 写入一下内容:
@font-face {
  font-family: \'iconfont\'; 
  src: url(\'fonts/iconfont.eot\');
  src: url(\'fonts/iconfont.eot?#iefix\') format(\'embedded-opentype\'),
      url(\'fonts/iconfont.woff2\') format(\'woff2\'),
      url(\'fonts/iconfont.woff\') format(\'woff\'),
      url(\'fonts/iconfont.ttf\') format(\'truetype\'),
      url(\'fonts/iconfont.svg#iconfont\') format(\'svg\');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 40px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333333;
}

.iconsolutionpage-person-icon:before {
  content: "\e633";
}
html中引用:
<i class="icon iconfont"></i>

　　

　　

 

 

 

 

 

 

版权声明：本文为changtao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/changtao/p/11970697.html