概述

icon 有很多做法，主要的做法有

  • img 標籤
  • background-image 屬性
  • CSS Sprites
  • font
  • svg
  • 純 CSS 實現

在這些方法中，目前最值得推薦的就是 svg 方法，其他的大家可以瞭解一下。

img 標籤

1
 
<img src="./img/xxx.png" alt="icon">

此種方法可以自適應寬高，只需要給 img 一個 width 屬性或者一個 height 屬性即可

background-image 屬性

1
2
3
4
5
6
7
 
CSS：
    div{
        background-image: url(./image/xxx.png);
    }

HTML:
    <div></div>

CSS Sprites

可以使用工具自動生成 Sprites ，之後進行使用，此種方法便是工具的使用

font

font 方法主要是使用阿里的 Unicode 和 Font class 方法
Font 方法

svg

svg 方法是現在最值得推薦的方法
SVG是可縮放矢量圖形，是W3C XML的分支語言之一，用於標記可縮放的矢量圖形。它支持 CSS 屬性

首先去阿里的 iconfont 網站

  1. 選取相應的圖標並加入購物車
  2. 將購物車中的圖標添加至項目
  3. 生成 Symbol 代碼
  4. 拷貝生成的 Symbol 代碼，放在 HTML 中

  5. 引入通用css代碼

    1
    2
    3
    4
    5
    6
    7
    8
    		 
    <style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
    </style>

  6. 挑選相應圖標並獲取類名，應用於頁面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xxx"></use>
        </svg>
        ``` 
    ![SVG](http://upload-images.jianshu.io/upload_images/9617841-1b6964ececccf5f7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    ![阿里 iconfont 使用](http://upload-images.jianshu.io/upload_images/9617841-ccdc31dd20104add.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    `<svg>` 屬性：

width: // icon 寬度
height: // icon 高度
fill: // icon 顏色
stroke: // 描邊
vertical-align: top; //可以用於調整上下間距。
```

純 CSS 實現

純 CSS 實現就是使用 CSS 去畫一些圖標，推薦一個網站