CSS4:icon全解

CSS4:icon全解

1.img法

1.1如何在psd文件里扣出圖層裏的圖標

1. 右鍵選中這個圖層
   
2. 右擊這個圖層,把這個圖層放到新文件
   
   
3. 點擊圖片的trim按鈕,自動切圖到最小
   
   
   再調整一下畫布大小,將圖片設置爲長寬同樣
   導出PNG便可

在頁面裏,PNG圖片會默認保持比例,因此只要設置寬高的其中一種就能夠了

摳圖的前端如今基本沒有了.屬於落後的技術

1.2 若是設計師給的是PNG(設計師不專業)

用PS扣.具體步驟是選中按鈕,crop,獲得新圖片,魔棒工具選中按鈕,反選,刪除背景,trim後,調整大小

1.3第一種引入圖標方法代碼

直接使用img標籤

2.background-icon 法

2.1第二種引入圖標方法代碼

將圖標當作div[display,inline-block]的背景圖.
好處是圖片大小固定,不隨div寬高改變而改變

2.2 精靈圖(雪碧圖) sprites

直接搜 CSS sprites Generator,直接生成
不要本身手動作,麻煩
css.spritegen.com

1. 上傳PNG文件,自動生成一個整的文件
   
2. 圖片另存爲,而後複製代碼
   
3. 粘貼代碼,作修改
   
   

雪碧圖方法老套,如今不多用了.

3.iconfont-HTML形式

使用iconfont.cn網站
大概原理:把字體變成圖標,用什麼字體中的字母就有什麼圖標

3.1iconfont.cn使用方法:

iconfont.cn

1. 不少圖標添加至購物車
   
2. 把這些圖標組成一種新字體.
   
   

   知識點:html字符實體
   
   若是實體編號大於某個數值了,就以x開頭,x表示爲16進制.好比'你'的編碼
   
   也就是說全部的符號,大於小於,空格,文字,均可以用實體編碼表示,瀏覽器會解析
   
   因此
   

3. 使用字體
   
   使用方法:
   

4. iconfont-CSS形式

可使用僞類CSS來添加圖標

4.1第二種用css簡便方法

當只用iconfont類的時候,告訴瀏覽器我這個容器要是用iconfont字體.
源代碼:原理

第二個class就是寫裏面是什麼圖標
而後用span

這種方法也快要被淘汰了,接下來看第三種方法

5.SVG icon(推薦使用)

目前你們優先使用這樣一種方法

5.1使用sketch作一個SVG圖,插卡看SVG圖特性

SVG實際上是一段代碼
瀏覽器能夠解析這段代碼,將它變成圖形
漸變,五角星位置,都是代碼,根據代碼,就能夠生成圖形

只要將代碼放到瀏覽器,就能夠出現圖片

5.2使用iconfont.cn引用SVG

查看幫助文檔

1,2引入js和style,3直接使用

SVG是矢量圖,不會失真,默認居中

若是是沒有顏色的SVG,能夠用fill屬性來改,若是有顏色,就不能用了.也能夠給svg描邊

之後作圖標就是SVG的時代了,他能夠漸變,能夠不失真,甚至能夠動
推薦在任什麼時候候都用第三種SVG方式

6. 用 CSS 幹 icon(不推薦使用)

cssicon.space
只用css作出圖標