您的位置：首页 > Web前端 > CSS

阿里巴巴iconfont使用方式

2017-02-25 23:31 204 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 阿里巴巴字体

相关文章推荐

新的分享

章节导航