阿里巴巴矢量图标的使用Demo
2016-12-28 10:22
295 查看
一、html网页的使用步骤:
1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_type=myprojects&projectId=210792 ;
2. 新建一个项目,保存到项目,下载到本地。
3. 网页使用时候,首先在html网页包含:
完整demo:
View Code
4. 引用哪个,输入:
1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_type=myprojects&projectId=210792 ;
2. 新建一个项目,保存到项目,下载到本地。
3. 网页使用时候,首先在html网页包含:
@font-face {font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome, firefox */ url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family:"iconfont" !important; font-size:42px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
完整demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css" /> <style type="text/css"> @font-face {font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome, firefox */ url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family:"iconfont" !important; font-size:42px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <div class="main markdown"> <h1>IconFont 图标</h1> <ul class="icon_lists clear"> <li> <i class="icon iconfont"></i> <div class="name">好友印象</div> <div class="code"></div> </li> <li> <i class="icon iconfont"></i> <div class="name">酒店印象</div> <div class="code"></div> </li> <li> <i class="icon iconfont"></i> <div class="name">品牌印象</div> <div class="code"></div> </li> </ul> </div> <div> <i class="icon iconfont"></i></div> </body> </html>
View Code
4. 引用哪个,输入:
<i class="icon iconfont"></i>
相关文章推荐
- Ionic使用Iconfont-阿里巴巴矢量图标库
- iconfont使用的三种方式(阿里巴巴矢量图标库代码使用)
- 简单介绍一下阿里巴巴矢量图标库的使用
- 使用阿里巴巴矢量图标库下载所需的小图标
- Android 开发中 阿里巴巴矢量图标库 IconFont的使用详解
- WPF使用矢量字体图标(阿里巴巴iconfont)
- 阿里巴巴矢量图标库使用
- 利用阿里巴巴的矢量图片库工具网站制作自己的图标字体
- 使用网络字体作为矢量图标
- 阿里巴巴矢量图标库
- 开发 常用图标 阿里巴巴-矢量图标
- Iconfont-阿里巴巴矢量图标库
- CSS3 iconfont矢量字体图标的使用
- 阿里巴巴矢量项目图标制作流程
- Iconfont-阿里巴巴矢量图标库
- 阿里巴巴矢量图标库
- 矢量图查找 阿里巴巴(矢量图标)
- Iconfont(阿里巴巴矢量图标库)上传图标显示空白的解决方法
- 如何使用阿里巴巴字体图标库
- 2017 阿里巴巴矢量图标库 导入所选图标到jsp页面步骤