阿里巴巴矢量图标的使用Demo

camelroyu 2022-01-01 原文

一、html网页的使用步骤：

1. 登录进入阿里巴巴矢量图标库中，选择自己喜欢的图标，放到购物车，http://www.iconfont.cn/plus/manage/index?manage_type=myprojects&projectId=210792 ；

2. 新建一个项目，保存到项目，下载到本地。

3. 网页使用时候，首先在html网页包含：

        @font-face {font-family: "iconfont";
          src: url(\'iconfont.eot\'); /* IE9*/
          src: url(\'iconfont.eot#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */
          url(\'iconfont.woff\') format(\'woff\'), /* chrome, firefox */
          url(\'iconfont.ttf\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url(\'iconfont.svg#iconfont\') format(\'svg\'); /* iOS 4.1- */
        }

        .iconfont {
          font-family:"iconfont" !important;
          font-size:42px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

完整demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css" />
    
    <style type="text/css">

        @font-face {font-family: "iconfont";
          src: url(\'iconfont.eot\'); /* IE9*/
          src: url(\'iconfont.eot#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */
          url(\'iconfont.woff\') format(\'woff\'), /* chrome, firefox */
          url(\'iconfont.ttf\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url(\'iconfont.svg#iconfont\') format(\'svg\'); /* iOS 4.1- */
        }

        .iconfont {
          font-family:"iconfont" !important;
          font-size:42px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont"></i>
                    <div class="name">好友印象</div>
                    <div class="code">&amp;#xe601;</div>
                </li>
            
                <li>
                <i class="icon iconfont"></i>
                    <div class="name">酒店印象</div>
                    <div class="code">&amp;#xe645;</div>
                </li>
            
                <li>
                <i class="icon iconfont"></i>
                    <div class="name">品牌印象</div>
                    <div class="code">&amp;#xe6c4;</div>
                </li>
            
        </ul>
    </div>
    <div> <i class="icon iconfont"></i></div>
</body>

</html>