阿里巴巴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">&#xe646;</i>
<i class="iconfont">&#xe645;</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">&#xe646;</i>
    <i class="iconfont">&#xe645;</i>
    <i class="iconfont">&#xe63f;</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使用方式的主要内容,如果未能解决你的问题,请参考以下文章

阿里巴巴Iconfont使用总结

iconfont-阿里图标库的使用简介

阿里巴巴iconfont正确的使用方式是怎样的?

web项目资源——iconfont

iconfont阿里巴巴图标有填色吗

IconFont在APP中的使用