阿裡巴巴矢量圖的使用

部落客在看到阿裡巴巴的網站時發現

購物車前面的圖示不是用img來做的，是用阿裡巴巴的矢量圖來做的。接下來介紹一下，關于阿裡巴巴矢量圖的使用方法。

1.首先進入網站

http://www.iconfont.cn/

2.在輸入框中輸入自己需要的圖示

比如輸入：購物車

3.添加入庫

4.單擊購物車圖示的按鈕，如圖所示

點選添加至項目，建立一個項目名。這裡可能會讓你登入賬号，是以登入賬号就行。

5.編碼方式選擇”unicode”編碼，這裡我添加了多個圖示，再點選”下載下傳至本地”

6.将下載下傳完的檔案解壓後，放到某一檔案夾中，右鍵打開demo_unicode.html檔案

7.把上述檔案中的代碼複制到自己的項目中

@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:px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: px;
          -moz-osx-font-smoothing: grayscale;
        }
           

特别提醒：src中的位址要注意别寫錯

<i class="icon iconfont">&#xe600;</i>
                    <div class="name">購物車</div>
                    <div class="code">&amp;#xe600;</div>
                </li>
           

上面i标簽中的class值就是上面樣式中的class。

以上，具體内容還需要自己摸索。