摘要：方案由于圖標(biāo)圖片比較多，而且體積很小，為了減少請(qǐng)求所以很多時(shí)候我們會(huì)用雪碧圖這種技術(shù)來(lái)將圖標(biāo)拼湊在同一張圖片里面。你也能想到，一堆圖標(biāo)的雪碧圖，修改維護(hù)會(huì)相當(dāng)麻煩現(xiàn)在比較好的方案是使用引入圖片，小圖直接轉(zhuǎn)換成插入中。

寫(xiě)這篇文章的目的其實(shí)就是為了安利一下我的圖標(biāo)庫(kù)：iconoo，所以，開(kāi)門見(jiàn)山，star吧少年少婦們?。ㄟ@樣的我是不是應(yīng)該要加個(gè)github互粉的團(tuán)伙了？）

主題說(shuō)完了，下面進(jìn)入正題。

在web開(kāi)發(fā)中，我們經(jīng)常要用到一些小圖標(biāo)（加減勾叉等）。通常做法就兩種：

直接使用圖片；

使用css/svg直接在瀏覽器中繪制圖標(biāo)。

方案1：由于圖標(biāo)圖片比較多，而且體積很小，為了減少請(qǐng)求所以很多時(shí)候我們會(huì)用雪碧圖這種技術(shù)來(lái)將圖標(biāo)拼湊在同一張圖片里面。你也能想到，一堆圖標(biāo)的雪碧圖，修改維護(hù)會(huì)相當(dāng)麻煩！現(xiàn)在比較好的方案是使用webpack引入圖片，小圖直接轉(zhuǎn)換成base64插入css中。直接使用圖片比較簡(jiǎn)單，這也是目前比較主流的做法。

方案2： 相比方案1，明顯可以減小資源的體積，只需要幾條css/svg命令就可以繪制出精美的圖標(biāo)，而且不受圖片尺寸限制，可大可小非常靈活。初看方案2的一堆代碼可能會(huì)覺(jué)得非常難，但其實(shí)很多簡(jiǎn)單的圖標(biāo)都是非常容易實(shí)現(xiàn)的。

接下來(lái)就是妹子們最期待的茄果叔叔手把手教學(xué)時(shí)間啦。

使用CSS繪制線條，用到的不外乎兩個(gè)屬性：border & box-shadow。而形狀則可以用border-radius、transform控制變形，位置則會(huì)用到絕對(duì)定位、transform、margin等屬性來(lái)調(diào)整。CSS的繪圖，做過(guò)幾個(gè)就知道大概是怎么回事了，歸根到底，還是幾何。如果覺(jué)得幾何燒腦，那就直接用 iconoo 吧~~~

基本原理說(shuō)了，下面來(lái)擼一發(fā)，先看看最簡(jiǎn)單的加號(hào)：

.plus {
    box-sizing : border-box;
    display    : inline-block;
    position   : relative;
    font-size  : 20px;
}

.plus:before, .plus:after {
    content        : "";
    pointer-events : none;
    position       : absolute;
    left           : 50%;
    top            : 50%;
    transform      : translate(-50%, -50%);
    box-shadow     : inset 0 0 0 1em;
}

.plus:before {
    width  : 1em;
    height : 2px;
}

.plus:after {
    height : 1em;
    width  : 2px;
}

代碼還是非常簡(jiǎn)單的，首先我們這里用到了before和after兩個(gè)偽類增加可用的標(biāo)簽，不然只有一個(gè)標(biāo)簽，要玩出花來(lái)實(shí)在是太難。content顧名思義就是內(nèi)容，里面可以加各種字符，甚至是換行之類的控制符。而pointer-events:none則是消除了鼠標(biāo)指針事件，這樣元素就具有穿透性了，具體細(xì)節(jié)還請(qǐng)自行搜索哈，這里就不多說(shuō)了。繪圖的核心，就是通過(guò)設(shè)置兩個(gè)偽類的寬高和陰影來(lái)繪制橫豎兩條線，位置方面是通過(guò)絕對(duì)定位+反向偏移的方式，巧妙利用了這兩個(gè)屬性百分比參照的不同實(shí)現(xiàn)了橫豎的居中。所有尺寸除了線寬（2px）外都使用em這個(gè)相對(duì)單位，所以調(diào)整font-size的值就可以調(diào)整圖標(biāo)的大小了。要調(diào)整線寬呢，就將所有px單位的尺寸都一并改了即可。

首先來(lái)看看這個(gè)圖片圖標(biāo)：

這個(gè)圖形網(wǎng)上說(shuō)的應(yīng)該還是比較多的了，然而我第一眼看到的時(shí)候還是懵逼了。。。分析一下，最外層的邊框明顯可以用border來(lái)做，然后用個(gè)before來(lái)做圓點(diǎn)也非常簡(jiǎn)單，關(guān)鍵是兩座大山要如何繪制呢？box-shadow貌似可以做多層邊框呢，然后加個(gè)旋轉(zhuǎn)是不是就出來(lái)了呢？最后隱藏邊框之外的部分就可以了。繪制流程如下：

.icon-img {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 90px;
    height: 80px;
    border: 5px solid;
    border-radius: 10px;
    color: #2ba5bb;
    overflow: hidden;
}

.icon-img:before,.icon-img:after {
    content: "";
    pointer-events: none;
    position: absolute;
}

.icon-img:before {
    width: 10px;
    height: 10px;
    top: 18px;
    right: 20px;
    box-shadow: inset 0 0 0 1em;
    border-radius: 50%;
}

.icon-img:after {
    width: 60px;
    height: 50px;
    left: 0;
    bottom: -27px;
    box-shadow: inset 0 0 0 50px,30px -20px 0 0;
    transform: rotate(45deg);
}

代碼是臨時(shí)拼的，就沒(méi)做成em單位了。呃，為什么要做成em單位呢？

我們?cè)谑褂脠D標(biāo)的時(shí)候，可能尺寸每次都不一樣，但圖標(biāo)的尺寸都是有關(guān)聯(lián)的，調(diào)整起來(lái)相當(dāng)費(fèi)勁。當(dāng)然你可以會(huì)想到用zoom、scale來(lái)做縮放，但是這樣的縮放線寬也會(huì)隨之變化了。設(shè)置em的話，在icon級(jí)設(shè)置font-size，然后icon本身以及后代都以這個(gè)font-size為參照，只調(diào)整font-size就完成了圖標(biāo)的等比縮放了。

再來(lái)看一個(gè)帶變形的：

這個(gè)一看其實(shí)就能猜到是怎么畫(huà)的，幾何關(guān)系貌似也比較簡(jiǎn)單，但是要映射到css的規(guī)則里面卻非常復(fù)雜。先看看流程：

.icon-codepen {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    color: #2ba5bb;
    width: 2px;
    height: 10px;
    box-shadow: inset 0 0 0 32px,0 15px,-11px 7px,11px 7px;
}

.icon-codepen:before,
.icon-codepen:after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 11px;
    height: 4px;
}

.icon-codepen:before {
    right: 2px;
    top: 3px;
    transform: skew(0,-35deg) scaleY(0.6);
    box-shadow: inset 0 0 0 32px,0 13px,11px 26px,12px 39px;
}

.icon-codepen:after {
    left: 2px;
    top: 3px;
    transform: skew(0,35deg) scaleY(0.6);
    box-shadow: inset 0 0 0 32px,0 13px,-11px 26px,-12px 39px;
}

難點(diǎn)就在長(zhǎng)寬的變形上，對(duì)于變形比較簡(jiǎn)單的方法是使用變換矩陣來(lái)求解。圖形學(xué)學(xué)的不好的話，那就比較痛苦了，如果不追求單標(biāo)簽的話，可以將每條邊用一個(gè)標(biāo)簽表示，這樣就很好處理了。

怎么樣？覺(jué)得上面這些都是小玩意？想裝逼了？好，叔叔教你！

蒙娜麗莎？什么鬼？我會(huì)告訴你這也可以用一個(gè)單標(biāo)簽純CSS畫(huà)出來(lái)的嗎？

http://codepen.io/jaysalvat/p... ，自己看去，幾千條box-shadow構(gòu)成的蒙娜麗莎，看的我內(nèi)分泌都失調(diào)了。。。

靜態(tài)的還不夠，那來(lái)點(diǎn)動(dòng)態(tài)的：

http://codepen.io/fbrz/pen/iqtlk ，不多說(shuō)，拿去不謝！

更多CSS玩意兒，請(qǐng)到codepen上去探寶吧！如果codepen都打不開(kāi)，可以到我博客園去下載相應(yīng)的css文件吧！什么，沒(méi)有提供下載鏈接？F12大法搞起！

語(yǔ)文老師說(shuō)了，文章要首尾呼應(yīng)升華主題，so one more time：寫(xiě)這篇文章的目的其實(shí)就是為了安利一下我的圖標(biāo)庫(kù)：iconoo，所以，開(kāi)門見(jiàn)山，star吧少年少婦們！