製做自定義的字體圖標

字體圖標比圖片更加靈活，可以使用字體的方式控制圖標的相關樣式表現。Bootstrap使用的font awesome囊括了不少經常使用的圖標供咱們使用。但有時候這裏面的圖標並不能知足咱們的需求，這時，咱們就須要定製本身的圖標了。

假若有一張你喜歡的圖標，想經過字體的方式控制它在頁面的表現，你須要按照以下方法作：

1. 你須要把該圖標轉換爲svg格式，至於如何轉換，身爲ps渣的我也不會，自行百度，也可參考如下網址的方法：http://jingyan.baidu.com/article/9158e000342ba6a25412281f.html?qq-pf-to=pcqq.c2c。這裏我拿一個現成的svg圖標作示例，就是開源中國首頁的logo圖標。把它下載下來以後，須要先按照你須要的尺寸修剪。ps好像不能處理svg格式圖片，咱們可使用在線的方式來處理。你須要訪問以下網址：http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Feditor.method.ac%2F&h=2000&c=&n=，這個工具也能夠把普通格式(*.png, *.jpg等)的矢量圖轉換爲svg格式。最後生成的svg格式圖片(oschina.svg)以下：

2. 在線訪問以下網址：https://icomoon.io/app/#/select，以下圖所示，點擊Import Icons按鈕，上傳oschina.svg，選中上傳的圖片以後再點擊最下面的Generate Fonts按鈕，跳轉到另外一個頁面。

3. 跳轉到新的頁面以後，你能夠對圖標進行其它的相關設置如重命名等操做，而後點擊Download按鈕下載便可。

4. 下載完成後，解壓縮文件，fonts文件夾中的四個文件(*.eot, *.svg, *.ttf, *.woff)就是字體圖標須要的四個文件。（下載的文件中有相關示例）