頁面中圖標的使用

  之前說要整理這塊內容，分享給大家，工作原因，直到現在，趕上清明宅在家裡，趕緊整理出來與大家分享。

精靈圖（CSS sprite）
  所謂精靈圖，其實就是把幾張圖拼成一張圖。從而在低併發的瀏覽器上達到快速傳輸並呈現內容的目的（減少請求）。

• 在用到這些圖片的時候，需要引用整張圖片然後設定坐標到需要的那張小圖上。
• 還有就是：圖片根據顏色分組，分成多個文件。每張圖只有一種顏色，這樣讓每張圖片變得更小。
• 當然，這根據當前項目來選擇適於你的方案。主要根據下麵兩個屬性來處理精靈圖：

1 background-image: url(".../*.png");
2 background-position: 0px 0px;
3 
4 /* 註意：position的負值情況。 */

先上幾個圖標網站，因為下麵要介紹字體圖標了：

• > [fortawesome.github.io]
• > [icomoon.io]
• > [阿裡圖標庫]
• > [Font Awesome 3.0]

字體圖標在html中的使用

1 <li><a href=""><i class="i-icon">&#xfa21;</i></a></li>
2 <!-- 註意：&#xfa21; fa21為16進位 需要&#x -->

 1  @font-face{
 2       font-family: "my-icon"
 3       src: url("../*.eot");
 4            /* ie低版本瀏覽器需要加'?' 否則可能回報404錯誤 */ 
 5       src: url("../ *.eot?") format("embedded-opentype")
 6            ,url("../ *.woff") format("woff")
 7            ,url("../ *.ttf") format("truetype")
 8            ,url("../ *.svg") format("svg");
 9            font-weight: normal;
10            font-style: normal;
11  }
12  .i-icon{
13         font-family: "my-icon";
14         font-style: normal;
15         font-weight: normal;
16         font-size: 26px;
17         -webkit-font-smoothing: antialiased; /*消除鋸齒*/
18         -moz-osx-font-smoothing: grayscale; /*消除鋸齒*/
19  }

字體圖標在css中的使用

1 <li><i class="icon icon-magic"></i></li>
2 <!-- 直接引用class name -->

@font-face {
    font-family: "myfont";
    src: url("../ *.eot");
    src: url("../ *.eot?#iefix") format("embedded-opentype"), 
         url("../ *.woff") format("woff"), 
         url("../ *.ttf") format("truetype"), 
         url("../ *.svg") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  .icon {
    font-family: "myfont";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-magic:before {
    content: "\c210";
  }

 各種方式對比