HTMLタグのテキストコンテンツをアイコンに置き換えた

Question

私はfont-awesomeのような象徴的なフォントで何年も働いています。今まで

は、私は、Webページ上のハートのアイコンを追加する必要があるとき、私はこのHTML構文を使用

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

技術的には、擬似要素:beforeを使用し、象徴的なフォントのでクラス名をリンク文字

fa-heart:before { 
    content: "\f004"; 
} 

しかし、次のフォント素晴らしいリリースのドキュメントで、それを行うための新しい方法がある：

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

ハート単語を対応するアイコンで置き換えることは、技術的にはどうですか？トリックはどこですか？

Answer 1

これらは、一連の文字を結束文字として参照しているため、結び目を変えて別のアイコンに変えることができます。

基本的に合字は2つ以上の文字の組み合わせです。フォントがこれらの組み合わせを指定する場合、合字の結果をどのように表示するかを選択できます。

伝統的には、2つの文字を結合するために結紮糸が使用されているため、互いに隣り合って配置されたときにうまく流れます。この手法では、CSSバージョンの合字を使用してカスタムアイコンを設定しています。対象の詳細については

このページをチェックアウト： https://css-tricks.com/ligature-icons/

これは、材料のアイコンに関してこの回答に議論されている： https://stackoverflow.com/a/44928943/1528308

Answer 2

この記事から： https://alistapart.com/article/the-era-of-symbol-fonts

フォント合字と呼ばれる特殊文字がありますが、しばしば は目立たず、 を読むのに使用されている文字フォームに微調整します。たとえば、2つの連続する "f"文字を取ります。良い フォントは、 "ff"をfs がスムーズに接続する単一の合字に変換します。 ff、 fl、およびfiを含むいくつかの標準合字があります。しかし、自分自身を定義することはできません。 のフォントファイルでは、単純な置き換えです。すべての結紮は の文字の正しい順序です。入力時には が別のグリフに置き換えられます。つまり、「A List Apart」のような文字列をロゴの単一シンボルアイコンに変換することができます。