アイコンの作り方（文字タイプ）
文字タイプのアイコンは画像ではありませんから「背景画像」で作成する事はできません。
そこで文字タイプのアイコンについて作り方を解説してみます。
特定のセレクタに対し、疑似要素の「::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; } |
７．上記手法を使って画像アイコンを埋め込む
上記手法の「content」プロパティに、文字の代わりに画像を使用することで、次のように画像アイコンを配置することもできます。
ただしこちらの方法は画像の大きさ変更、位置調整などが結構厄介なので画像アイコンを作成する方法としてはおすすめできません。
画像アイコンを作成する方法は「アイコンの作り方（画像タイプ） | 超初心者のWEBサイト作成」を参考にしてください。
