手把手教你打造一個純CSS圖示庫-css教學-PHP中文網

寫這篇文章的目的其實就是為了安利一下我的圖標庫：iconoo，所以，開門見山，star吧少年少婦們!(這樣的我是不是應該要加個github互粉的團伙了?)

手把手教你打造一個純CSS圖示庫

主題說完了，下面進入正題。

在web開發中，我們常常要用到一些小圖示(加減勾叉等)。通常做法就兩種：

直接使用圖片;

使用css/svg直接在瀏覽器中繪製圖示。

方案1：由於圖示圖片比較多，而且體積很小，為了減少請求所以很多時候我們會用雪碧圖這種技術來將圖示拼湊在同一張圖片裡面。你也能想到，一堆圖標的雪碧圖，修改維護會相當麻煩!現在比較好的方案是使用webpack引入圖片，小圖直接轉換成base64插入css中。直接使用圖片比較簡單，這也是目前比較主流的做法。

方案2：相比方案1，明顯可以減少資源的體積，只需要幾條css/svg指令就可以繪製出精美的圖標，而且不受圖片尺寸限制，可大可小非常靈活。初看方案2的一堆程式碼可能會覺得非常難，但其實很多簡單的圖示都是非常容易實現的。

接下來就是妹子們最期待的茄果叔叔手把手教學時間啦。

手抓手教學時間

使用CSS繪製線條，用到的不外乎兩個屬性：border & box-shadow。而形狀則可以用border-radius、transform控制變形，位置則會用到絕對定位、transform、margin等屬性來調整。 CSS的繪圖，做過幾個就知道大概是怎麼回事了，歸根到底，還是幾何。如果覺得幾何燒腦，那就直接用iconoo 吧~~~

基本原理說了，下面來擼一發，先看看最簡單的加號：

.plus { 
    box-sizing : border-box; 
    display    : inline-block; 
    position   : relative; 
    font-size  : 20px; 
} 
 
.plus:before, .plus:after { 
    content        : &#39;&#39;; 
    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; 
}

登入後複製

程式碼還是很簡單的，首先我們這裡用到了before和after兩個偽類增加可用的標籤，不然只有一個標籤，要玩出花來實在是太難。 content顧名思義就是內容，裡面可以加裝各種字符，甚至是換行之類的控制符。而pointer-events:none則是消除了滑鼠指標事件，這樣元素就具有穿透性了，具體細節還請自行搜尋哈，這裡就不多說了。繪圖的核心，就是透過設定兩個偽類的寬高和陰影來繪製橫豎兩條線，位置方面是透過絕對定位+反向偏移的方式，巧妙利用了這兩個屬性百分比參照的不同實現了橫豎的居中。所有尺寸除了線寬(2px)外都使用em這個相對單位，所以調整font-size的值就可以調整圖示的大小了。要調整線寬呢，就將所有px單位的尺寸都一併改了即可。

進階玩法

首先來看看這個圖片圖示：

手把手教你打造一個純CSS圖示庫

這個圖形網上說的應該還是比較多的了，然而我第一眼看到的時候還是懵逼了。。。分析一下，最外層的邊框明顯可以用border來做，然後用個before來做圓點也非常簡單，關鍵是兩座大山要如何繪製呢?box-shadow貌似可以做多層邊框呢，然後加個旋轉是不是就出來了呢?最後隱藏邊框之外的部分就可以了。繪製流程如下：

手把手教你打造一個純CSS圖示庫

.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: &#39;&#39;; 
    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); 
}

登入後複製

程式碼是臨時拼的，就沒做成em單位了。呃，為什麼要做成em單位呢?

我們在使用圖標的時候，可能尺寸每次都不一樣，但圖標的尺寸都是有關聯的，調整起來相當費力。當然你可以會想到用zoom、scale來做縮放，但這樣的縮放線寬也會跟著改變了。設定em的話，在icon級設定font-size，然後icon本身以及後代都以這個font-size為參照，只調整font-size就完成了圖示的等比縮放了。

再來看一個帶變形的：

手把手教你打造一個純CSS圖示庫

這個一看其實就能猜到是怎麼畫的，幾何關係貌似也比較簡單，但是要映射到css的規則裡面卻非常複雜。先看流程：

手把手教你打造一個純CSS圖示庫

.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: &#39;&#39;; 
    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; 
}

登入後複製

難點就在長寬的變形上，對於變形比較簡單的方法是使用變換矩陣來求解。圖形學的不好的話，那就比較痛苦了，如果不追求單標籤的話，可以將每條邊用一個標籤表示，這樣就很好處理了。

叔叔，我想裝逼

怎麼樣?覺得上面這些都是小玩意?想裝逼了?好，叔叔教你!

手把手教你打造一個純CSS圖示庫