阿里巴巴矢量圖標的使用Demo

時間 2020-07-10

原文原文鏈接

1、html網頁的使用步驟：css

1. 登陸進入阿里巴巴矢量圖標庫中，選擇本身喜歡的圖標，放到購物車，http://www.iconfont.cn/plus/manage/index?manage_type=myprojects&projectId=210792 ；html

2. 新建一個項目，保存到項目，下載到本地。web

3. 網頁使用時候，首先在html網頁包含：chrome

        @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：markdown

<!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>