首页 > 其他 > 详细

使用阿里巴巴的icon

时间:2019-12-02 16:08:28      阅读:63      评论:0      收藏:0      [点我收藏+]
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>

  

  

 

 

 

 

 

 

使用阿里巴巴的icon

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!