擬似要素の前にグリフアイコンを表示する理由：

Question

この質問は私の脳の中で長い間忘れ去られています。すべてのグリフアイコンライブラリがFont Awesomeのようにアイコンをこのように提供しているようです。これはCSSでグリフを入れる唯一の方法ですか？またはこれが最善の方法ですか？

a:before { 
    font-family: FontAwesome; 
    content: "\f095"; 
} 

Answer 1

私はこの質問を2つの別々のものに分けることができると感じ：アイコンのフォントを使用する理由

1. ？

2. なぜ：before擬似要素を使用して表示するのですか？

最初の部分については

、reasons are manyが、それはで動作するように簡単であることに帰着する（彼らはベクトルであるように、簡単に色を変更することができ、本質的に透明な背景を持っている）しても、古いブラウザ上で非常に良いサポートを持っていました。

第2部分では、擬似要素を使用すると、アイコンがCSSファイル内に完全に「生きる」ことができます。編集が容易であることは別として、コンテンツの一部ではなく、HTMLの外観に影響を与えるものです。それをsame distinction as between img tag and background-image CSS propertyと考えてください（再びデザイン対コンテンツ）。

さらに、疑似要素を選択することができず、したがってコピーすることができないなど、いくつかの奇妙な副作用を防ぎます。これが当てはまらない場合、すべてのアイコンがコピーされると、コピー先の奇妙な文字が表示されます。

Answer 2

「i」タグとして使用することもできます。私たちはもっと多くの創造的なCSSをそのように適用することができます。ここcodepenです：

http://codepen.io/anon/pen/gLdYqj

<script src="https://use.fontawesome.com/2d1d8af5b4.js"></script> 
<div><i class="fa fa-user"></i></div> 


div{ 
    font-size:50px; 
} 
i{ 
    color:blue; 
} 
i:hover{ 
    color:red; 
    cursor:pointer; 
}