建立字體 - 令人敬畏的圖標

Question

我會建立自己的字體 - 真棒圖標集。 特別是我會構建一些具有所有功能的font-awesome副本，但只使用一部分圖標。

此外，我真的很感興趣他們如何在fonts文件夾中構建文件。 在github上我找到了這個包含所有svg圖標的repo 。 在ubuntu上，使用Font Custom ，我能夠生成給svg文件作為輸入，即字體文件，即使我不是很滿意。 但除此之外，我不明白如何將這些文件與font-awesome 合並 。

總結一下，如何使用我自己的svg文件創建自己的字體 - 真棒集？

請不要說使用fontello ， icoMoon或similars ，因為我想在我的本地機器上做，沒有任何第三方服務。

Answer 1

我實際上做了類似的事情，但不得不承認它從來都不是完美的，很可能是因為字體轉換不好，從來沒有時間讓它變得完美。 基本上我使用以下鏈接（大部分）

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

該過程的概述

步驟1 - 創建單個gylphs（您應該使用特殊字符以避免某人使用您的字體“鍵入”。

第2步 - 將gylphs選擇保存為SVG字體。

第3步 - 將SVG字體轉換為網絡字體（有很多免費的在線轉換器）

第4步 - 生成要使用的CSS類（為所有單個字形創建所有可能的類） - 結果應該類似於：“icon icon-lg icon-blue icon-hand” - （更好地使用LESS / SCSS這部分 - 你會明白為什么以后）其中一個包含所有圖標的常規設置，另一個控制尺寸覆蓋，一個控制顏色，最重要的一個使用：after - >輸出圖標。

第5步 - 現在你有一個由CSS控制的工作網絡字體，創建一個用於選擇單個字形的UI。 最有可能你應該使用LESS，這樣你只“暴露”用戶選擇的類（EG。 - icon-1,2,5,8等）所有其他圖標仍然包含在字體中但是它們對應CSS類不會在最終的CSS中輸出。

可能有更高級的方法，但是這個概述和教程應該可以幫助您獲得基礎知識。

Answer 2

我相信你可以使用FontLab Studio： http ：//store.fontlab.com/

但是，您可能必須編寫自己的CSS，我個人認為使用icomoon或類似的基於Web的生成器生成它更容易，更快，因為它專門用於生成Web字體，在FontLab Studio或類似的桌面應用程序之前制作設計桌面字體，並沒有預先構建的CSS編譯器/生成器。

我想看看桌面發電機也是如此。

Answer 3

我沒有深入挖掘自己的字體圖標集，但我認為有一些svg數據正在使用中。

就像一個不同的方式的想法 - 你甚至可以在集合類上使用background-img：在/之后

有用的資源： http ： //iconizr.com/我發現他們的數據網址生成很有用（比fontello更好的svg轉換，icoMoon）