タイトル通りです。一瞬詰まったので。知っていたらなんだそんなことかという話なのだが……。
TOPページの微細な改装に明け暮れていたころ、とあるリストの文頭に「シンプルで一色の絵文字」を配置したくなったので、Font Awesomeに使えるものがないか探していました。しかし、少なくとも無料版には私の使いたいアイコンは無く、かといってただの絵文字をつけるのでは見た目が好みに合わないのでもう少し試行錯誤してみることにしました。
次の試みは、Noto Emojiを使って絵文字の表示フォント自体を変えてみることでした。このNoto EmojiはGoogleが提供しているUnicode絵文字のフォントで、CSSでfont-familyを指定してやれば一般的なフォント同様ウェイトを変えたりサイズを調節したりできます。
実はこれは既にサイトで使われており、トップページ冒頭の「information」などのタイトルを囲む恐竜のアイコンがそれです。恐竜のアイコンイラストもFont Awesomeの無料版には無く（どうして！）、以前もこの方法を利用して望みの「モノクロでシンプルな絵文字」を表示させていたのでした。
←Noto Emojiこれ→
使いたい絵文字を直接テキストとして入力し、CSSでfont-family: ‘Noto Emoji’を適用しようとしました。
が、フォントが全く変わらない！なんで！？Chromeの検証機能でよく見てみると絵文字部分が画像になっている……。ここで冒頭の件に戻ってきます。
WordPressはバージョン4.2以降、絵文字を自動的に<img>タグに置換するようになったらしいです。ガーン。デバイス間での絵文字の表示を統一させる意図なのはわかるのだが……。
ここで少し話が戻りますが、なぜトップページのinfomationの絵文字の方は正しく「Noto Emoji」フォントで表示されたのか？ これは私がCSSでヘッダー（タイトル）の::before要素にcontent:‘🦕’という形で絵文字を挿入していたからで、CSSのcontentで生成された文字はimg置換の対象外となるようです。そうなんだ。
となると問題の箇所にも、リストの各<li>に疑似要素で絵文字を入れれば画像化を回避できそうですが、各liに毎回違う絵文字を使いたかったし、そこをクラスとか付けていては解決方法としてあまりにゴリ押しすぎて気持ちが悪いし、リストの数が増えたときに面倒すぎるので却下。
閑話休題。
原因がわかれば対処は明瞭で、WordPressの絵文字置換は子テーマのfuncitons.phpを少し編集するだけで無効化できるようです（少し検索するだけで数多の解説ブログが出てくるので詳細はそちらに譲ります）。しかし、Noto Emojiが使いたいがためにまた子テーマ編集するのもめんどくせーな・・・と思ってしまいました。今のところ通常の絵文字の運用には困っていないわけですし（まあこれを期にすべてNoto Color Emojiにしてもいいのだが）。
あくまで私は「〇〇の絵柄のモノクロでシンプルな絵文字が欲し～い」としか考えていなかったので、Font Awesomeに無いなら他のアイコンフォントを探せばいいんじゃない！？と気を取り直し探索を続けていました。
で、見つけたのがPhosphor Iconsです。
なんてかわいいの！？ かなり細めで丸みを帯びたラインが絶妙で、メインフォントのM Plus 1とも相性が良さそうです。最初からこれにしておけばよかった！！！！！今までの時間はなんだったんだ！！！！！
Phosphor Iconsの導入方法
公式ドキュメント（上記公式サイト→Get Started）を読めばわかることですが。一応。他のアイコンフォントと同じく、<head></head>内に書くだけです。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@<VERSION>/src/<WEIGHT>/style.css"><VERSION>に使用するバージョンを、<WEIGHT>部分には使いたいスタイル（regular・thin・light・bold・fill・duotone）を入力します。スタイルは6つの太さと塗りかたから選べて、絵文字一覧の左上、Regularのところを変更すると雰囲気がわかります。全てはここに書いてあります。
私の環境では、現在のPhosphor Icons web版の最新バージョンが2.1.2、太さは標準のregularにしているのでこんなかんじ↓
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">このサイトはWordpressを使用・テーマを借りて（改変して）いるので、<head>タグに直接書くのではなく、子テーマのfunctions.phpから<head>内に記述する方法を使いました🎶親テーマのhead.phpに触ってはいけませんよ🎶「head内 functions」とかで検索して出てきた記事たちを鵜呑みにしているよ！！！
あとは使いたい絵文字をクリック→webタブ→コピーボタンを押す→ペーストする 以上です。
無料ながら1,200以上の絵文字を揃えており、なによりデザインがカワイイのでオススメです
うしとかいる。
恐竜はまだ居ないのですが、絵文字の追加はされているっぽいので今後にかなり期待しています。おわり
