HTMLでフォントを手動で挿入する

サポート
1

こんにちは :slight_smile:
HTML を使って、以下の 2 つのシンボル :heart: と :white_check_mark: を追加しようとしています。
これらは Font Awesome のフォントだと理解しているため、以下のように挿入してみました。

<i class="fa fa-heart-o"></i>

しかし、フォントが表示されません。

image

サイズ 0x0 のものが追加されるだけです。フォントを正しく追加するにはどうすればよいでしょうか？

2

カスタム CSS を追加してサイズを強制する方法を試しましたか？

3

なぜ代わりにUnicode絵文字を使わないのですか？

4

それは古い形式です。FontAwesome では2018年11月以降 SVG アイコンへ移行しており、現在はフォントアイコンの i 要素の代わりに SVG 構文を使用しています。

5

Unicodeの絵文字を使って動作するようにしましたが、以下の2つの理由から、これが解決策ではないと思います：

  1. 他の絵文字との一貫性。例えば、Windows 10の絵文字タイプからAppleのものに変更すると、プラグイン側でも変更する必要があります。
  2. 古いブラウザがそのようなフォントやUnicodeをサポートするかどうか確信が持てません。

ただし、効率性を考慮すれば、SVGを使うよりもマシだと思います。

もしよろしければ、簡単な使用例を示していただけませんか？

6

これらのアイコンをプラグインに追加する場合は、Ruby と Ember の両方で使用するためのコアツールが用意されています。まずは、Introducing Font Awesome 5 and SVG icons をご覧ください。