この記事ではTHETHORのアイコンコード【Unicode】の使い方について紹介しているよ！！
THETHORの標準搭載アイコンは「class属性」で管理されています。なのでアイコンをカスタマイズして自由に使うには新規に「id属性」「class属性」を作成する必要があります。
Unicodeの基本的な使い方
Unicodeを使ってカスタマイズしたアイコンを記事内に表示させてみよう！！
「id属性」や「class属性」とUnicodeを使ってアイコンをカスタマイズしておくと、より効率的で無駄の少ないコード記述でアイコンの使い分けができるよ！！
- 「id属性」と「class属性」の違い
id属性 属性値(任意の名前)の前に「#」(シャープ)をつけることで、CSSを指定する。 同一Webページ内でid属性の値は重複不可。 class属性 属性値(任意の名前)の前に「.」(ドット)をつけることで、CSSを指定する。 同一Webページ内でclass属性の値は重複可。
- 疑似要素「before」と「after」の違い
::before beforeは指定した要素内にあるコンテンツの直前に疑似要素を追加する。 ::after afterは指定した要素内にあるコンテンツの直後に疑似要素を追加する。
- HTML要素の種類と違い
ブロック要素 – 段落有 <p></p> 汎用ブロック要素 – 改行有 <div></div> 汎用インライン要素 – 改行無 <span></span>
id属性で指定
#任意の名前::before{ font-family: "icomoon"; content: "\ea09"; font-size: 18px; color: red; }<p id="任意の名前">コンテンツ</p>class属性で指定
.任意の名前::before{ font-family: "icomoon"; content: "\ea09"; font-size: 18px; color: red; }<p class="任意の名前">コンテンツ</p>「任意の名前」部分は好きな名前を付けます。またアイコンをコンテンツの前後どちらに表示させるかの調整は疑似要素で、HTML要素は用途に合わせて「ｐ」「div」「span」のどれかを使ってくださいね！！
アイコンは上手く表示されましたか？参考イメージと参考コードを載せておくので上手くいかない方は確認してみてね！！
参考イメージと参考コード
参考イメージの内容として、同一アイコンの色をカスタマイズしたパターンを3種類作成してみました。属性は「id」疑似要素は「::before」HTML要素は「p」を使用しています！！
任意の名前は「otameshi1」「otameshi2」「otameshi3」で作成しています。
参考イメージ
パターン①
パターン②
パターン③
参考コード
#otameshi1::before{ font-family: "icomoon"; content: "\ea09"; font-size: 18px; color: red; }#otameshi2::before{ font-family: "icomoon"; content: "\ea09"; font-size: 18px; color: green; }#otameshi3::before{ font-family: "icomoon"; content: "\ea09"; font-size: 18px; color: blue; }<p id="otameshi1"> パターン①</p><p id="otameshi2"> パターン②</p><p id="otameshi3"> パターン③</p>