Icon for web

Icon for web

Icon 前端 FontAwesome iconfont

---

　　最近的幾個項目中，頻頻出現了一個icon的頭疼問題，雖然之前碰見過，使用過，可是沒有好好的整理、記錄下來，形成在項目中浪費了很多時間。這太不符合個人作人宗旨了-一分鐘能解決的問題決不能給他兩分鐘。不廢話，直奔主題。純屬小記，不對之處還請拍磚指點。

 

Font Awesome

　　FontAwesome 提供豐富的矢量字體圖標，還在不斷更新中。經過CSS能夠任意控制全部圖標的大小 ，顏色，陰影。

---

特性：

---

1. 無需javascript

2. css可控性

3. 最低兼容ie7（很惋惜，官方提供的只是3.2.1版本）

4. 能夠在高分辨率顯示器中完美顯示

5. 能夠應用於各類UI

6. 兼容屏幕閱讀器

7. 重點是，徹底免費

---

　　我的認爲，3.2.1 全套361個圖標已經夠用了，並且兼容ie7。可是ie7的用戶量你們是知道的，基本上能夠忽略，如今高速發展的互聯網技術，硬件的更新換代，高級瀏覽器普及，徹底可讓咱們安心的去追求新技術而取捨一些東西。那麼，咱們就能夠去使用FontAwesome最新版本，圖標不斷更新中。比起精靈技術，FontAwesome也是完美勝出，項目中，上頭上個廁所冒出來一個想法，估計精靈得去趟韓國了。

---

使用

1. Font Awesome官網下載最新壓縮包而後解壓到你的項目中。

2. 在 標籤 裏, 引入 font-awesome.min.css.

3. 參考案例開始項目

4. 如需兼容IE瀏覽器，可使用Font-awesome的3.2.1版本。下載font-awesome-ie7.css或者是font-awesome-ie7.min.css。而後在項目中引入該樣式文件。

 

<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->

　　

---

關於3.2.1

　　3.2.1下載地址
　　如何兼容ie7官方 點擊查看
　　3.2.1 圖碼參照 點擊查看

---

　　使用過程當中要注意版本要對上號，查看對應代碼，最新的圖碼參照，常常會有小夥伴用着3.2.1版本而後去找4.3的圖標。 
做爲字體，固然能安裝到系統中去。安裝 FontAwesome.otf 文件到你的系統中。 而後，拷貝並粘貼圖標字體的代碼到你的草圖或設計中就能看到效果了！參考官網。固然，做爲前端，能夠不用去關心這個。 
固然做爲電商業務的小夥伴可能就會特別關注iconfont。後續我會繼續去關注和學習iconfont。

---

　　總結，仍是那句話，好記性不如爛筆頭，生活多記錄，積累點滴，成長天然而然。感謝豪哥 @豪情的指點和幫助，前端路上我不會停步。