アイコンの作り方（文字タイプ）
文字タイプのアイコンは画像ではありませんから「背景画像」で作成する事はできません。
そこで文字タイプのアイコンについて作り方を解説してみます。
特定のセレクタに対し、疑似要素の「::before」を使用します。
【参考サイト】
CSSセレクタのチートシート｜37パターンを一覧で解説｜webliker（ウェブライカー）
::before (:before) – CSS: カスケーディングスタイルシート | MDN
１．CSS側に疑似要素「::before」を追記する
まず、アイコンを作成したいセレクタに「content」を使ってアイコン用の文字を指定します。
するとその領域すべてに画像が埋め込まれます。（壁紙機能）
下記のソースコードは前もってa要素をある程度デザインしています。
【htmlのソースコード】
|
1 2 3 4 5 |
<ul class="list"> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> </ul> |
【cssのソースコード】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; } .list a { background-color: #ffffff; border: solid 1px #cccccc; display: block; text-decoration: none; } .list a::before { } |
２．アイコン文字はcontentで指定する
文字タイプのアイコンは表示したい文字をそのまま「content」に記述します。
３．アイコン文字のデザインを調整する
文字タイプのアイコンは、アイコンそのものが文字なので文字装飾のCSSがそのまま使えます。
例えば、文字色は「color」、文字の大きさは「font-size」が使用できます。
またアイコンと文字の上下センターが揃わない場合は、「vertical-align: middle;」を追加するといいかもしれません。
【cssのソースコード】
|
1 2 3 4 5 6 |
.list a::before { content: "≫"; font-size: 30px; color: #ff0000; vertical-align: middle; } |
４．領域の高さを調整する
領域の高さが足りない時は「line-height」でBOXの高さを調整します。
【cssのソースコード】
|
1 2 3 4 5 6 7 |
.list a::before { content: "≫"; font-size: 30px; color: #ff0000; vertical-align: middle; line-height: 40px; } |
【表示サンプル】
５．文字を右にずらす
現状ではアイコンと文字がくっついていますので、アイコンの右側に余白を入れて少し離しましょう
【cssのソースコード】
|
1 2 3 4 5 6 7 8 |
.list a::before { content: "≫"; font-size: 30px; color: #ff0000; vertical-align: middle; line-height: 40px; padding-right: 5px; } |
６．アイコンの位置調整をする
また、アイコンも左端から始まってますので、アイコンの左側に余白を入れ、デザインを整えましょう。
【cssのソースコード】
|
1 2 3 4 5 6 7 8 9 |
.list a::before { content: "≫"; font-size: 30px; color: #ff0000; vertical-align: middle; line-height: 40px; padding-right: 5px; padding-left: 5px; } |
【表示サンプル】
