CSSの擬似要素でアイコンを表示する方法
CSSの便利な疑似要素「: : after」と「: : before」を使ってIcoMoonのアイコンフォントを表示します。
「HALOWEEN」の上のへび（::before）と後ろ（::after）のランタン、こんな感じでアイコンを配置します。
IcoMoonでアイコンをダウンロードする
オリジナルアイコンの作り方、選択したファイルのダウンロードは別の記事で詳しく解説していますのでここはサラッと行きます◎ IcoMoonのサイトへ行き、右上、紫のボタンIcoMoon Appをクリック＞アイコンが表示してあるページへ行きます。
１:上の黄色い矢印で ＞ ２:アイコンを選択 ＞ ３:Generate Font ＞
２で選択したアイコンの一覧が出ます。（自作のアイコン３つ、既存のアイコンconeの計４つです）４:Download でファイルをダウンロード
「icomoon-v1.0 」フォルダがダウンロードされました（解凍した状態です）。今回必要なのは「fonts」フォルダ（とその中の４つのファイル）と「style.css」ファイルです。この２つを新しく作ったHWフォルダに入れます。入れ方の１つの案ですが、
（HWの中にhtml、cssファイルを作りました）左下、icomoon-v1.0のstyle.cssの名前をicomoon.cssに変更します。
どうして変更するの？
HWフォルダの中のstyle.cssと名前が重複しないようによ
icomoon-v1.0のfontsフォルダもHWフォルダに入れてください。これでHWフォルダの中身は右下のようになっているはずです。画像（helloween.jpg）はあっても無くても◎
VSCodeで見るとこんな状態です。準備が終わりましたのでコードを書いて行きます。
htmlファイルです。
<head>〜</head>内にstyle.cssとicomoon.cssのリンクを書きます。
<body>〜</body>の中に書いたAとBですが、Aはご覧の通りここhtmlにicomoonのアイコンコードを書く方法です。これはこれまで他のページでも解説して来ました。
今回のメインはcssに擬似要素を使ったBの書き方です。Aと違ってhtmlファイルにアイコンのコードを書きません。
AとB、この後cssコードを書きますがどちらも同じように表示出来ます。
Aはicomoon.cssファイルのAのコードをhtmlに書きます。今回のメイン擬似要素Bの書き方の時はBのコード（ユニコード）を使います。
A：htmlにコードを書いて表示する方法
htmlファイル（画面上）HALLOWEENの前にヘビ(icon-python)のコードを、後ろにボックス(icon-d3)をhtmlを書き、css（画面下）はこんな風に大きさ（emでなくpxでOKです）と色を指定しました。
cssで薄く表示したコードは今回の説明とは関係ない部分です
B：cssにコードを書いて擬似要素で表示する方法
先述した通り、htmlのHALLOWEENの文字の前後には書きません。cssでHALLOWEENの文字の前後、と言う指定をします。この時に使うのが擬似要素「::before」「::after」です。前の「p」はHALLOWEENの文字を囲んでいる<p>〜</p>の事です。
HALLOWEENの前（少しずらして実際は上にしていますが）にヘビを表示させるには「::before」を使います。
「content : ” ” ; 」も必須です。ここにicomoonでダウンロードしたコードのB（３枚上の画像 \e908 など）を書きます。
「font-family: “icomoon” ;」も必須です。これを書かないと四角に×マークなどで正しく表示されません。
有名なFontAwesomeを擬似要素で使う場合はここが「font-family: “fontawesome” ;」になるよ
icomoon.cssファイルを見ても１５行目に「font-family: “icomoon” ;」と指定してありますね。
ここまで出来たらダンロードしたユニコードを自由に書き換えてアイコンを変更\e906 → \e908するのも簡単です。
icomoon既存の三角コーンを使った擬似要素での表示方法を１から。
１、htmlに<h2>〜</ h2>の見出しダグを作り中に文字「サイト〜」を書きます。
２、cssにh2の文字を細く(normal)する指示を書きます。続いてfont-familyをicomoonと指定します。
３、擬似要素を書きます。h2::before {〜}
４、その中にcontent: ; を書き、三角コーンのユニコード「\e900」を書きます。ここまでで保存して見てみると小さい黒い三角コーンが「サイト更新中です」の前に表示されます。
５、文字の後ろにも表示したいので h2::before の後にカンマ「,」で続けて h2::after と書き、後は色や大きさでデザインするとこのような見た目になります。
最後にアイコンフォントを使わない擬似要素を。
カッコ『 』付きのタイトルです。
『 』を ” ” にしたり（ ）にしたり。
お疲れ様でした◎
