不管做網(wǎng)站開發(fā)或手機開發(fā)，或桌面程序開發(fā)瑰抵，擁有一套漂亮的圖標是必不可少的你雌。合適的圖標也能給軟件增色不少。

提供免費圖標或字體的二汛，Font Awesome是其中比較有名的一家婿崭。Bootstrap Icons和Material Design icons by Google，還有其他的也很受歡迎肴颊。也有些網(wǎng)站提供了圖標的下載氓栈，包括免費或不免費的，像Iconfinder婿着，Icons8授瘦，freeicons等醋界。對開發(fā)者來說，很多時候只會利用其中非常小的一部分提完。有時候可能還需要多家圖標的組合形纺。這個時候如果都包含每家全部字體的集合，就很雞肋了徒欣。去網(wǎng)站搜索下載也不是便利的選擇逐样。

icons-font-customization這個Node.js軟件（或工具）提供了超33,000個開箱即用的免費 svg?圖標集合和生成自己圖標字體的工具。所有圖標都適合于私人或商業(yè)項目打肝。請先打開這個鏈接?所有圖標?確認下包含了哪些圖標官研。在這個鏈接，可以更改圖標顏色闯睹，背景色和大小。還可以根據(jù)關(guān)鍵字檢索担神，保存圖標是否選中的狀態(tài)楼吃，或輸出選中圖標的列表字符串。先貼一張略圖：

icons-font-customization除了提供非常多的圖標之外妄讯，也提供了靈活的本地運行方式孩锡。這個工具可以把本項目包含的不同來源的圖標打包成一個字體文件，甚至可以下載任何網(wǎng)址的svg文件并進行轉(zhuǎn)換打包亥贸。各個來源圖標的相關(guān)許可證信息會被自動包含在生成的css文件中躬窜。

怎么使用呢？非常簡單炕置，先介紹下項目結(jié)構(gòu)荣挨，然后就是使用方法了。

（如果電腦還沒有安裝 Node.js, 請去這兒下載安裝：?Downloading and installing Node.js and npm）

為了適合各種情況朴摊，這兒有兩個項目默垄，都可以達到相同目的。

1.1, 當前這個項目（`icons-font-customization`）包含超過 26M 大小的 svg 文件甚纲。如果您不是太在意磁盤空間口锭，那么可以安裝這個項目。這樣您將非常能快速的利用本地 svg 文件生成字體介杆。

1.2, 或者您可以安裝一個叫 `icons-font-command` 的子項目鹃操，這個子項目不包含任何 svg 圖標，因此非常小春哨。 `icons-font-command` 從 Github 的 `icons-font-customization` 倉庫直接的遠程拷貝圖標等荆隘。如果您不會使用太多的 svg 文件，它也是很快的悲靴。

項目 `icons-font-customization` 包含 `icons-font-command` 項目. 因此不管您使用哪一個項目臭胜，命令方式都是一樣的莫其。

這兒的例子我都是以使用 `icons-font-command` 來介紹的。如果您使用 `icons-font-customization` 耸三，那么您需要替換安裝例子中的項目為 `icons-font-customization` 乱陡。

方法1，下載或克隆您需要的項目到本地仪壮。

點擊項目主頁icons-font-customization的 "Download ZIP" 并解壓到本地合適的文件夾憨颠。

或者使用 git 命令克隆到本地：

git clone https://github.com/uuware/icons-font-command.git

不管使用哪種方式，您將在本地得到這個項目积锅，然后 cd 到這個項目的根文件夾并運行下面的命令來生成字體爽彤。（注意，命令行中的 `-- --` 是正確的）：

`npm run generate-font -- --config config-file-path`

如果您在運行文件夾有一個叫 icons-font.config.js 的配置文件缚陷，那么可以省略配置文件路徑：

`npm run generate-font`

方法2适篙，使用 NPM 全局安裝 `icons-font-command` （或 `icons-font-customization`）。

運行：

`npm install -g icons-font-command`

現(xiàn)在您可以在任何文件夾中運行命令（無論您安裝的是哪個項目箫爷，該命令都是相同的嚷节，并注意命令中的 `--`）：

`icons-font-command --config config-file-path`

如果您在運行文件夾有一個叫 icons-font.config.js 的配置文件，那么可以省略配置文件路徑：

`npm run generate-font`

您還可以使用此命令在當前文件夾生成默認配置文件：

`icons-font-command --copyconfig`

方法3虎锚，在您的 Node.js 項目中安裝硫痰。

如果想要在代碼中自由的操作它，則根據(jù)您的需要窜护，在項目的根文件夾中運行 `npm i icons-font-command --save-dev` 或 `npm i icons-font-customization --save-dev` 命令效斑。

然后在代碼中這樣調(diào)用：

varIconsFontLite =require('icons-font-command');IconsFontLite.cmd();// Or pass parametersvarparameters = {'--config':'config-file-path'};varIconsFontLite =require('icons-font-command');IconsFontLite.generateFont(parameters);

如果一切正常，你將在輸出文件夾得到結(jié)果柱徙，打開 sample.html 確認結(jié)果或包含 icon-style.css 在您的html中缓屠。

如何選擇圖標并獲得在配置中使用的代碼

1, 打開所有圖標, 然后您可以查看所有圖標。

您可以更改圖標的顏色护侮、背景色和大小藏研。您還可以搜索并單擊它們來選擇或緩存選定的狀態(tài)。

點擊 "Populate Configuration" 按鈕輸出配置代碼概行。

2, 將配置代碼粘貼到文件 "icons-font.config.js" 蠢挡。

在方法2中，您可以運行 `icons-font-command --copyconfig` 在當前文件夾生成默認的 "icons-font.config.js" 配置文件凳忙∫堤ぃ或者您可以從項目 `icons-font-command` 的跟文件夾拷貝該文件。

作為一個示例涧卵，最終的結(jié)構(gòu)應該是 （不要使用這個示例勤家，而是復制原始的 "icons-font.config.js" 文件）：

module.exports={fontName:'i-font',outputPath:'dist/sample/',outputName:'i-font',/*程序會自動添加擴展名*/startChar:10000,//圖標字體的內(nèi)部編碼icons:[/*本地或遠程svg的路徑*/{path:'font-awesome/brands/apple.svg',name:'fa-apple'},.../*甚至下載任何網(wǎng)址的svg*/{path:'https://raw.githubusercontent.com/fontello/awesome-uni.font/29d4e3ff028fc850a21b5eaafde0a83f22f59cf1/src/svg/amazon.svg',name:'fa-amazon'},],fontType:{'woff2':true,'woff':true,'ttf':true,'eot':false,'svg':false,},cssTemplate:'copy from icons-font.config.js...',htmlTemplate:'copy from icons-font.config.js...',}

關(guān)于字體的兼容性

WOFF2: Chrome 36, Firefox 39, Opera 23, Safari 10, IE no support, Edge 14

WOFF 的 2.0 版本。WOFF2 下一代版本的 WOFF柳恐。 WOFF2格式比原始WOFF格式提高了30%的平均壓縮增益伐脖。

WOFF: Chrome 5, Firefox 3.6, Opera 11.10, Safari 5.1, IE 9, Edge 12

Web開放字體格式热幔。WOFF 基本上是 OTF or TTF 上添加了壓縮，并被主流瀏覽器支持讼庇。

它是 Mozilla Foundation绎巨，Microsoft，和 Opera Software 和合作結(jié)果蠕啄。因為字體被壓縮了场勤，它有更快的加載速度。

TTF: Chrome 4, Firefox 3.5, Opera 10, Safari 3.1, IE 9, Edge 12

TrueType 字體. 所有主流瀏覽器和IE 9及更高版本都支持這種格式歼跟。

EOT:Chrome no support, Firefox no support, Opera no support, Safari no support, IE 6-11

嵌入式 OpenType和媳。這是唯一可以在IE8及以下版本中使用的字體，并且需要@font-face方式加載哈街。

SVG font: Chrome 4-37, Firefox no support, Opera 10-24, Safari 3.2-14, IE/Edge no support

可縮放矢量圖形字體留瞳。 SVG 字體是未壓縮的，唯一可以在 version 4.1 and below of Safari for iOS (iPhone, iPad) 中使用的字體骚秦。

關(guān)于創(chuàng)建字體的建議

1, 如果不需要支持 IE撼港，可以使用 WOFF2 來支持所有主流瀏覽器

或者 2, 使用 WOFF 來支持所有主流瀏覽器和 IE 9及以上, Edge 12及以上

或者 3, 同時使用 WOFF2 和 TTF 來支持所有主流瀏覽器和 IE 8及以上

所有1、2骤竹、3都需要這樣的HTML代碼：`<i class="ifc-icon icon_name"></i>`

或者 4, 同時使用 WOFF2 和 TTF 和不同的 CSS 代碼來支持IE6-7，和所有主流瀏覽器和 IE 8及以上往毡。因為從IE8開始支持 '.css_class_name:before (注意不是兩個冒號){ content: "" } CSS 代碼蒙揣。所以IE6-7需要不同CSS代碼：f(icons code)

貢獻

如何添加一個新的精彩的 svg 圖標項目？

如果您有一個 svg 圖標項目想和其他人分享开瞭，我會非常樂意的添加它們懒震。請聯(lián)系我。

如果您想為您的本地開發(fā)添加嗤详，則可以這樣做：

1.下載或克隆此項目 https://github.com/uuware/icons-font-customization.git

2. 根據(jù)您的項目名稱在 /dist/svgs 下創(chuàng)建一個新文件夾个扰。例如，這里我們稱之為 new-project葱色，所以新文件夾應該是 /dist/svgs/new project递宅。

3. 添加一個描述項目信息的 json 文件和一個許可文件。（請在 /dist/svgs/ 下的其他文件夾中確認json文件結(jié)構(gòu)）

4. 添加子文件夾（svgs或其他內(nèi)容）并將您的圖標復制到 /dist/svgs/new-project/svgs苍狰。

5. 運行 "icons-font-command --maintain" 命令優(yōu)化 svg 并創(chuàng)建演示頁面办龄。

6. 然后，您可以像其他圖標一樣使用新的svg圖標淋昭。

許可證

所有代碼（除 svg 俐填、字體外的所有文件）均在 CC0-1.0 許可證下分發(fā)。

所有 svg 和字體都在其原始許可證下分發(fā)翔忽。

請參閱/dist/svgs下各個文件夾中包含的許可證和鏈接的信息英融。此信息也包含在生成的css文件中盏檐。

所有包含的商標、品牌和/或名稱都是其各自所有者的財產(chǎn)驶悟。