使用阿里巴巴的icon

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>

  

  

原文地址:https://www.cnblogs.com/changtao/p/11970697.html