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

一、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">&#xe601;</i>
                    <div class="name">好友印象</div>
                    <div class="code">&amp;#xe601;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe645;</i>
                    <div class="name">酒店印象</div>
                    <div class="code">&amp;#xe645;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6c4;</i>
                    <div class="name">品牌印象</div>
                    <div class="code">&amp;#xe6c4;</div>
                </li>
            
        </ul>
    </div>
    <div> <i class="icon iconfont">&#xe601;</i></div>
</body>

</html>
View Code

4. 引用哪个，输入:

  <i class="icon iconfont">&#xe601;</i>

 

posted @ 2016-12-28 10:22  wangmeihong  阅读(891)  评论(0)    收藏  举报