如何整合 Icon 字型

Created: November-22, 2018

要使用圖示字型，請按照以下步驟操作：

將字型檔案新增到專案中

你可以從 icomoon 等線上網站建立字型圖示檔案，你可以在其中上傳所需圖示的 SVG 檔案，然後下載建立的圖示字型。然後，將 .ttf 字型檔案放入 assets 資料夾中名為 fonts （根據需要命名）的資料夾中：

建立一個助手類

現在，建立以下幫助程式類，以便你可以避免重複該字型的初始化程式碼：

public class FontManager {
  public static final String ROOT = "fonts/";
  FONT_AWESOME = ROOT + "myfont.ttf";
  public static Typeface getTypeface(Context context) {
    return Typeface.createFromAsset(context.getAssets(), FONT_AWESOME);
  }
}

你可以使用 Typeface 類從資產中選擇字型。這樣，你可以將字型設定為各種檢視，例如，設定為按鈕：

Button button=(Button) findViewById(R.id.button);
Typeface iconFont=FontManager.getTypeface(getApplicationContext());
button.setTypeface(iconFont);

現在，按鈕字型已更改為新建立的圖示字型。

拿起你想要的圖示

開啟附加到圖示字型的 styles.css 檔案。在那裡你會發現你的圖示帶有 Unicode 字元的樣式：

.icon-arrow-circle-down:before {
  content: “\e001”;
}
.icon-arrow-circle-left:before {
  content: “\e002”;
}
.icon-arrow-circle-o-down:before {
  content: “\e003”;
}
.icon-arrow-circle-o-left:before {
  content: “\e004”;
}

此資原始檔將用作字典，它將與特定圖示關聯的 Unicode 字元對映到人類可讀的名稱。現在，按如下方式建立字串資源：

<resources>
  <! — Icon Fonts -->
  <string name=”icon_arrow_circle_down”>&#xe001; </string>
  <string name=”icon_arrow_circle_left”>&#xe002; </string>
  <string name=”icon_arrow_circle-o_down”>&#xe003; </string>
  <string name=”icon_arrow_circle_o_left”>&#xe004; </string>
</resources>

使用程式碼中的圖示

現在，你可以在各種檢視中使用你的字型，例如，如下所示：
```
button.setText(getString(R.string.icon_arrow_circle_left))
```
你還可以使用圖示字型建立按鈕文字檢視：