前端——阿里图标的使用详解

时间：2024-01-29 08:08:47

链接地址：http://www.iconfont.cn/

首先进入阿里图标首页进行登陆，有三种登陆方式，本人用新浪微博进行登陆。

可在搜索框输入指定的图标样式，选中的图标加入购物车，本人建议最好一次性将所需要的图标都加入到购物车中，方便避免重复进行。

图标加入购物车后，点击右上角的购物出。

点击新建一个项目

输入项目的名称并点击确认

点击Font-class和查看在线连接，若没有连接，点击红色的生产连接即可，就出现了一个css样式的连接。这个样式里储存了你项目里所有选中的图标。

可以复制这个连接，在网页中打开这个链接。可以看到这些图标有一个总的样式，属性名叫iconfont，所以在使用这个图标时，一定要加上这个属性。然后五个图标各自有一个独立的样式，分别叫icon-weixin、icon-weixin1、icon-weixin2、icon-weixin3、icon-weixin4、icon-weixin5。

下面简单展示下这几个图标，要注意的是，处理阿里图标样式可以与文字处理一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_923612_bsbnso2jta.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        span.icon-weixin5{
            font-size: 50px;
        }
        span.icon-weixin4{
            font-size: 50px;
        }
         span.icon-weixin3{
            font-size: 50px;
        }
         span.icon-weixin2{
            font-size: 50px;
        }
         span.icon-weixin1{
            font-size: 50px;
        }

    </style>
</head>
<body>
    <span class="iconfont icon-weixin4"></span>
    <span class="iconfont icon-weixin5"></span>
<span class="iconfont icon-weixin3"></span>
<span class="iconfont icon-weixin2"></span>
<span class="iconfont icon-weixin1"></span>
</body>
</html>

相关文章