回答編集履歴

1 テキスト修正

jun68ykt

jun68ykt score 5700

2019/01/20 11:23  投稿

こんにちは
ドキュメントを調べてみると、[有効なアイコンの説明](https://onsen.io/v2/api/js/ons-icon.html#available-icons) に、以下が書かれています。
> **Available icons**
There are three kinds of icons available in Onsen UI:
>
> ・Font Awesome
 ・Material Icons
 ・Ionicons
> The icon attribute is prefixed with fa- for Font Awesome, md- for Material Icons and ion- for Ionicons.
なので、おそらく `"md-home"` を `"fa-home"` に修正するだけでいけるのでは?と予想しました。
そこで、[昨年末のご質問](https://teratail.com/questions/166449)で、私が回答のために作った[サンプルコード](https://github.com/jun68ykt/q166449)に、以下の修正をしてみました。
- jun68ykt/q166449: [Font Awesomeに変更](https://github.com/jun68ykt/q166449/commit/4873eb22ed96eeff7bc55bb8fae1b6eed4a21206)
上記の修正をするだけで、`react-fontawesome` 等の追加インストールをしなくても、以下のように [fa-home](https://fontawesome.com/v4.7.0/icon/home) が表示されるのを確認できました。
![イメージ説明](2f8404ea8fa3332ca2b16c9da11430c4.png)
以上、参考になれば幸いです。
以上、参考になれば幸いです。
### 追記
**すみません**
ご質問にある、
> バンドルサイズを削減するため、アイコンパックを除去した onsenui-core.min.js をインポート
を見落としていました m(_ _)m
となると、 `<Tab />` に、ご自身で、たとえば `iconComponent` といったpropsを追加して、
```jsx
<Tab iconComponent={<FontAwesomeIcon icon='faHome' />} />
```
のようなことが出来るように Tab のソースを修正することになるのでは?と思います。 そうなると、OnsenUIのissues
[https://github.com/OnsenUI/OnsenUI/issues](https://github.com/OnsenUI/OnsenUI/issues)
のほうで相談してみるほうが、コミッターないしそれに近しい人から早くて確実な回答をもらえそうです。
以上、あまり役に立たなそうな回答になってしまいましたが、参考になれば幸いです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る