小圖標的使用（插入icon圖標）

@xudongh 2016-07-14 12:06 字數 2180 閱讀 2050

 

 

在網頁中插入icon圖標的方法總結

前端開發

---

 

三種方法

1. CSS Sprite
2. font + HTML
3. font + CSS

---

 

CSS Sprite

 

① 概述

CSS Sprite也稱爲「CSS 雪碧」或者「CSS 精靈」。它是把網頁中一些零星背景圖片定位到要顯示的位置，所以也叫「圖片拼合」技術。

 

② 特色

1. 相對單個小圖標，能夠節省文件體積和服務器請求次數，從而提升效率。
2. 通常狀況下，須要將文件保存爲PNG-24的文件格式，由於相對於PNG-8，PNG-24不會出現毛邊。
3. 能夠設計出豐富多彩的顏色圖標。
4. 須要預先肯定每一個小圖片的大小。
5. 注意小圖標與小圖標之間的距離。

 

③ 使用方法

用到的知識點主要爲：

• background-image
• background-position

---

 

font + HTML

 

① 概述

使用字體用HTML代碼以文本的形式直接在網頁中畫icon小圖標。

 

② 爲何使用icon字體圖標

使用圖標字體可大大減小圖標維護工做量。 
1. 靈活性：輕鬆地改變圖標的顏色或其餘CSS效果。 
2. 可擴展性：改變圖標的大小，就像改變字體大小同樣容易。 
3. 矢量性：圖標是矢量的，與像素無關。縮放圖標不會影響清晰度。 
4. 兼容性：字體圖標支持全部現代瀏覽器（包括糟糕的IE6）。 
5. 本地使用：經過添加定製字體到你的本地系統，你能夠在各類不一樣的設計和編輯應用程序中使用它們。

 

③開源的icon字體圖標網站

• http://fontawesome.io/
• https://icomoon.io/
• http://www.bootcss.com/p/font-awesome/
• http://unicode-table.com/cn/
• https://design.google.com/icons/
• 如何自制字體圖標：http://flowerboys.cn/font/article/fontsarticle/how-to-turn-your-icons-into-a-web-font.html

 

④字體文件格式

• EOT(Embedded OpenType Fonts)：微軟開發的用於嵌入網頁中的字體，IE專用字體。
• WOFF(The Web Open Font Format)：Web字體中最佳格式，是一個開放的TrueType/OpenType的壓縮版本，2009年被開發，現在被W3C組織推薦標準。
• TTF(TrueType Fonts)：1980s，由Microsoft和Apple聯合開發的一套字體標準，是Mac OS和WIN操做系統中最多見的一種字體。
• SVG(SVG Fonts)：用於SVG字體渲染的一種格式，是由W3C制定的開放標準的圖形格式。

因爲瀏覽器對字體支持程度不同，爲了在全部瀏覽器都顯示字體圖標，咱們必須同時引入這些字體文件。

 

⑤ 使用方法

主要用到@font-face屬性。 
CSS：

 

1. @font-face{
2. font-face:"family-name"; /*自定義字體名稱*/
3. src:url("../font/XXX.eot"); /*解決IE9兼容模式下的兼容性問題*/
4. src:url("../font/XXX.eot?") format("embedded-opentype"), /*在eot加?或者?iefix，以解決字體文件在IE下加載失敗的問題*/
5. url("../font/XXX.woff") format("woff"),
6. url("../font/XXX.ttf") format("trueytype"),
7. url("../font/XXX.syg") format("svg");
8. font-weight:normal; /*定義字體粗細*/
9. font-style:normal; /*定義字體樣式*/
10. ｝
12. .icon｛ /*按照通常的字體來寫樣式便可*/
13. font-family:"family-icon";
14. font-style:normal;
15. font-weight:normal;
16. font-size:20px;
17. -webkit-font-smoothing:antialiased; /*用於webkit引擎中的字體抗鋸齒屬性*/
18. -moz-osx-font-smoothing:graycale /*用於Mac OS系統和火狐瀏覽器中的字體抗鋸齒屬性*/
19. ｝
21. .example{
22. color:#fff; /*可輕鬆改變圖標顏色*/
23. font-size:24px; /*改變圖標的大小*/
24. }

HTML：

 

1. <!-- 將icon圖標輸出時，須要在icon的16進制編碼前加上&#x -->
2. <i class="icon example">&#xf048;</i>

---

 

font + CSS

 

① 概述

將icon圖標對應的HTML代碼經過CSS屬性寫入樣式文件，而後調用樣式名稱便可。

 

②使用方法

主要使用:before僞元素、after僞元素、content屬性

CSS：

 

1. /*@font-face屬性、.icon樣式與上面方法無異*/
2. .example:before{
3. content:"\f048" /*須要在16進制編碼前加上\進行轉譯*/
4. }

HTML：

 

1. <i class="icon example"></i>