阿里巴巴iconfont使用方式
Posted loveyunk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了阿里巴巴iconfont使用方式相关的知识，希望对你有一定的参考价值。
IconFont的作用就是用字体的格式来取代图片、特殊字体的展示，用得比较多的就是一些纯色的图标，具体主要由当前css3属性里的自定义字体(@font-face)来实现。
1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”；
2.选择完所有要用的图标后“添加至项目”，给它命名。然后在“图标管理－我的项目”中找到这个项目，查看在线代码，把里面的代码复制到CSS中。
第一步：拷贝项目下面生成的font-face
@font-face { font-family: ‘iconfont‘; /* project id 209539 */ src: url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.eot‘); src: url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix‘) format(‘embedded-opentype‘), url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.woff‘) format(‘woff‘), url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.ttf‘) format(‘truetype‘), url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.svg#iconfont‘) format(‘svg‘); }
要在// 前加上http: 以上代码使用如下
@font-face { font-family: ‘iconfont‘; /* project id 209539 */ src: url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot‘); src: url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix‘) format(‘embedded-opentype‘), url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.woff‘) format(‘woff‘), url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.ttf‘) format(‘truetype‘), url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.svg#iconfont‘) format(‘svg‘); }
第二步：定义使用iconfont的样式
.iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont"></i> <i class="iconfont"></i>
代码如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> @font-face { font-family: ‘iconfont‘; /* project id 209539 */ src: url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot‘); src: url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix‘) format(‘embedded-opentype‘), url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.woff‘) format(‘woff‘), url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.ttf‘) format(‘truetype‘), url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.svg#iconfont‘) format(‘svg‘); } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> </body> </html>
font-class引用
第一步：拷贝项目下面生成的fontclass代码： css引入
//at.alicdn.com/t/font_4yyty9qjdzpvi.css
第二步：挑选相应图标并获取类名，应用于页面：
<i class="iconfont icon-gouwuche"></i>
代码如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_4yyty9qjdzpvi.css"> <title>Document</title> <style> .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <i class="iconfont icon-lianjie"></i> <i class="iconfont icon-lajixiang"></i> <i class="iconfont icon-gouwuche"></i> </body> </html>
以上是关于阿里巴巴iconfont使用方式的主要内容，如果未能解决你的问题，请参考以下文章