アイコンの作り方(文字タイプ)

文字タイプのアイコンは画像ではありませんから「背景画像」で作成する事はできません。
そこで文字タイプのアイコンについて作り方を解説してみます。

特定のセレクタに対し、疑似要素の「::before」を使用します。

【参考サイト】
CSSセレクタのチートシート|37パターンを一覧で解説|webliker(ウェブライカー)
::before (:before) – CSS: カスケーディングスタイルシート | MDN

1.CSS側に疑似要素「::before」を追記する

まず、アイコンを作成したいセレクタに「content」を使ってアイコン用の文字を指定します。
するとその領域すべてに画像が埋め込まれます。(壁紙機能

下記のソースコードは前もってa要素をある程度デザインしています。

【htmlのソースコード】

【cssのソースコード】

【表示サンプル】

2.アイコン文字はcontentで指定する

文字タイプのアイコンは費用辞したい文字をそのまま「content」に記述します。

【cssのソースコード】

【表示サンプル】

3.アイコン文字のデザインを調整する

文字タイプのアイコンは、アイコンそのものが文字なので文字装飾のCSSがそのまま使えます。
例えば、文字色は「color」、文字の大きさは「font-size」が使用できます。また上下のセンタリングを行いたければ「vertical-align: middle;」を追加します。

【cssのソースコード】

【表示サンプル】

4.領域の高さを調整する

領域の高さが足りない時は「line-height」でBOXの高さを調整します。

【cssのソースコード】

【表示サンプル】

5.文字を右にずらす()

現状ではアイコンと文字がくっついていますので、アイコンの右側に余白を入れて少し離しましょう

【cssのソースコード】

【表示サンプル】

6.アイコンの位置調整をする

また、アイコンも左端から始まってますので、アイコンの左側に余白を入れます。

【cssのソースコード】

【表示サンプル】