字體圖標製做的方法

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"; }這樣代碼是沒有用的，由於前面還有幾個關聯文件，須要同時修改，所以儘可能在生成圖標的網站用本身的帳號登錄，能夠生成一個本身的圖標庫，能夠長久保存使用。