使用阿里巴巴的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>

  

  

 

 

 

 

 

 

posted @ 2019-12-02 15:12  Py浪涛  阅读(539)  评论(0编辑  收藏  举报
你想听歌吗o((;=゚ 3゚ =))o~♪