前端开发阿里巴巴iconfont正确的使用教程

web前端开发项目总结 接前端开发项目 前端开发实战项目

1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”;

.2.选择完所有要用的图标后“存储为项目”,给它命名。然后在“项目图标管理”-“项目管理”中找到这个项目,获取在线链接,把里面的代码复制到css中。

3.在html中需要使用到图标时,使用iconfont类名。

<i class=”iconfont”></i>

里面写上你想用的图标下面的Unicode:

4.然后你可以通过控制iconfont类的属性改变图标的样式,比如:

.iconfont{
font-family:”iconfont”;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
padding-left:20px
}

就可以在页面中引用和修改了。
注意:浏览的时候不能在本地浏览的,我是通过在线的方法把iconfont引进来的,也可以下载到本地使用

html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″>
    <title></title>
    <style>
        @font-face {
            font-family: ‘iconfont’;
            src: url(‘//at.alicdn.com/t/font_1462953902_774078.eot’);
            /* IE9*/
            src: url(‘//at.alicdn.com/t/font_1462953902_774078.eot?#iefix’) format(’embedded-opentype’),
            /* IE6-IE8 */
            url(‘//at.alicdn.com/t/font_1462953902_774078.woff’) format(‘woff’),
            /* chrome、firefox */
            url(‘//at.alicdn.com/t/font_1462953902_774078.ttf’) format(‘truetype’),
            /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url(‘//at.alicdn.com/t/font_1462953902_774078.svg#iconfont’) format(‘svg’);
            /* iOS 4.1- */
        }
        .iconfont {
            font-family: “iconfont”;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
            padding-left: 20px
        }
    </style>
</head>
<body>
    <i class=”iconfont”></i>
    <i class=”iconfont”></i>
</body>
</html>

前端开发的项目职责 前端项目整个开发流程图 web前端开发实战项目

» 本文来自:前端开发者 » 《前端开发阿里巴巴iconfont正确的使用教程》
» 本文链接地址:https://www.rokub.com/5466.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!