font-awesomeはHTMLで埋め込むべきか、擬似要素beforeを使うべきか

fontawesomeについての質問です。
<i class="fas ">というタグをHTMLに直説埋め込む方法で使っていたのですが、
調べると擬似要素:beforeを使ったやり方もあるということを知りました。

一般的にどっちを書くのが普通ですか？
また擬似要素:beforeを使って書くメリットなどはあるのでしょうか？

fontawesome5系を使っています。

2019/04/06 09:46

Font Awesomeのバージョンは4系以前でしょうか、5系でしょうか？

2019/04/06 10:02

> タグをHTMLに直説埋め込む方法で使っていたのですがそのときに擬似要素を使うので、「`i`要素をHTMLに直接埋め込む方法」と「擬似要素を使う方法」という比較は成立しないと思いますが、いかがでしょうか？

2019/04/06 10:11

自分の回答からリンクしましたが、「<i>なしで疑似要素だけ出現させて使う方法」が存在するので、それを指しているものと思われます。

退会済みユーザー

2019/04/06 10:16 編集

説明不足して申し訳ございません。maisumakunさんのおっしゃる通りです。

行動規範の内容に同意します

回答1件

ベストアンサー

Font Awesomeの5系列は、大きく分けて2種類あります。

JavaScript+SVG版…「ReactやVueなど仮想DOMとの相性がいい」「使う画像だけ埋め込むことが容易」な手法。この方法を使う場合、使いやすさ・安定性は「仮想DOMなどJavaScriptで生成する」＞「<i>タグで書く」＞「疑似要素で書く（重いので、デフォルトでは止めてあります）」となります。
CSS+Webfont版…4系列と同じ、Webフォントによる表示。こちらは疑似要素だからといって重くなることはありません。

ただ、どちらにしても、疑似要素を使う方法はHTMLを書き換えられない場合の手段として位置づけられていて、自分で対応したコードを書く必要があります。

投稿2019/04/06 10:10

総合スコア145183