web端和移動端為什么需要做字體圖標？
性能好是最主要的原因，可以減少http請求。在之前項目中，網頁的圖標是用的圖片，當圖標很多時，http請求多，而且圖片體積比較大。
字體圖標制作流程
1設計師設計出圖標保存為SVG格式的。
當沒有設計師時，也可以在http://www.iconfont.cn/ 或者其他網站下載自己需要的SVG圖標。需要登陸賬號，看見喜歡的圖標可以收藏或者下載下來，一版情況下不支持這樣，圖標也是有版權問題的，不過如果是小公司使用也沒有人管...盡量支持正版，做過設計，設計師也不容易。
2：把SVG格式的圖標進行處理，推薦網站：http://www.iconfont.cn/或者http://fontello.com/，拖進來就可以了。
3：下載文件包括下面內容
dome.html文件就是顯示的圖標在網頁中的顯示情況，看看是不是都顯示正常。
4：怎么使用在網頁中，引入css文件，把圖標名稱寫入class類就可以了。
<button type="button" class="btn" title="導航"><i class="icon-daohang"></i></button>
<button type="button" class="btn" title="刪除"><i class="icon-shanchu"></i></button>
當然，如果不想設計圖標，也怕麻煩，也可以直接導入外部的圖標庫，比如：font-awesome
css文件<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
這樣不需要自己制作圖標，不過當圖標庫進行更改是可能會影響自己的效果。不建議這樣使用。
5:引入的圖標css文件源碼分析
在這里已mui框架的字體圖標的CSS文件進行分析
@font-face {
font-family: MuiiconSpread;
font-weight: normal;
font-style: normal;
src: url('../fonts/mui-icons-extra.ttf') format('truetype'); /* iOS 4.1- */
}
.mui-icon-extra
{
font-family: MuiiconSpread;
font-size: 24px;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.mui-icon-extra-cold:before { content: "\e500"; }
.mui-icon-extra-share:before { content: "\e200"; }
.mui-icon-extra-class:before { content: "\e118"; }
.mui-icon-extra-custom:before { content: "\e117"; }
.mui-icon-extra-new:before { content: "\e103"; }
.mui-icon-extra-card:before { content: "\e104"; }
.mui-icon-extra-grech:before { content: "\e105"; }
.mui-icon-extra-trend:before { content: "\e106"; }
.mui-icon-extra-filter:before { content: "\e207"; }
.mui-icon-extra-holiday:before { content: "\e300"; }
特別需要注意的，當你每一次需要增加圖標時，直接添加.mui-icon-extra-holiday:before { content: "\e300"; }這樣代碼是沒有用的，因為前面還有幾個關聯文件，需要同時修改，因此盡量在生成圖標的網站用自己的賬號登陸，可以生成一個自己的圖標庫，可以長久保存使用。