デモで学ぶ CSS テキスト先頭のアイコン配置
疑似要素・Flexbox・アイコンフォントの3系統で、テキストの前にアイコンを置く方法をボタン操作で比べながら確認できます。すぐに使えるHTML・CSSのコードをコピーできます。
HTML・CSS・JSコードプレビューツール にて実装確認ができます。
やりたいことから探す
① ::before 疑似要素 — 文字・記号をアイコンにする
Information text
Check Point here
Likes and more
現在: content: '\2714'
<p class="icon-item">Information text</p>
<p class="icon-item">Check Point here</p>
<p class="icon-item">Likes and more</p>.icon-item {
position: relative;
padding-left: 1.8em;
margin: 0 0 10px;
font-size: 1rem;
color: #1e293b;
line-height: 1.7;
}
.icon-item:last-child {
margin-bottom: 0;
}
.icon-item::before {
content: '\2714';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: #16a34a;
font-size: 1em;
line-height: 1;
}content プロパティに Unicode エスケープシーケンス（例: ‘\2714’）を指定すると、アイコン代わりの記号を疑似要素として表示できます。親要素に position: relative、疑似要素に position: absolute を組み合わせることで、テキストを基準にした自由な位置指定が可能になります。あわせて親要素の padding-left でアイコン分の余白を確保するのが必須です。これを忘れると、アイコンがテキストの1文字目に重なります。
使いたい記号の Unicode コードポイントは、Google で「チェックマーク unicode」などと検索すると確認できます。「U+2714」のような形式で表示されたら、「U+」を除いた数字部分の前にバックスラッシュを付けて CSS に記述します（例: U+2714 → ‘\2714’）。記号の一覧は Symbl や Unicode 文字テーブル で検索・閲覧できます。なお CSS の content で使うのは16進数のコードポイントで、HTML の実体参照（✔）とは書き方が違う点に注意してください。
② top / bottom — アイコンの縦位置を合わせる
複数行にわたる長いテキストのサンプルです。アイコンの上下位置がどのように変わるか、ボタンを切り替えて確認してみてください。
現在: top: 0
<p class="icon-item">複数行にわたる長いテキストのサンプルです。アイコンの上下位置がどのように変わるか、ボタンを切り替えて確認してみてください。</p>.icon-item {
position: relative;
max-width: 340px;
padding-left: 1.8em;
margin: 0;
font-size: 1rem;
color: #1e293b;
line-height: 1.7;
}
.icon-item::before {
content: '\2714';
position: absolute;
left: 0;
top: 0;
color: #16a34a;
font-size: 1em;
line-height: 1.7;
}1行目に合わせたいときは top: 0 を指定しますが、それだけでは少し上にずれます。行の高さ（line-height: 1.7）の中で文字は上下中央に置かれるため、行の上側に余白があるからです。疑似要素にも同じ line-height: 1.7 を指定すると、テキストと同じ行送りの中に収まり、1行目にぴったり揃います。
テキスト全体の高さの中央に揃えるイディオムです。top: 50% は親要素の上端から50%の位置にアイコンの上端を置くため、その状態ではまだ中央より下にずれています。transform: translateY(-50%) でアイコン自身の高さの半分だけ上へ戻すことで、視覚的な中央揃えになります。1行だけのテキストならこの指定、複数行なら top: 0（1行目基準）が自然に見えます。最終行に合わせたいときは top ではなく bottom: 0 を使います。
③ display: flex — position を使わない配置
現在: align-items: center
<div class="icon-item">
<span class="icon" aria-hidden="true">✔</span>
<span>テキスト内容</span>
</div>.icon-item {
display: flex;
align-items: center;
gap: 0.5em;
margin: 0 0 10px;
font-size: 1rem;
color: #1e293b;
line-height: 1.7;
}
.icon-item:last-child {
margin-bottom: 0;
}
.icon {
flex-shrink: 0;
color: #16a34a;
font-size: 1em;
line-height: 1;
}flexbox なら position を使わずにアイコンとテキストを横並びにできます。align-items: center で縦方向の中央揃え、gap で間隔を指定するだけとシンプルです。アイコン側に flex-shrink: 0 を指定すると、テキストが折り返してもアイコンが潰れません。テキストが2行以上になるなら align-items: flex-start のほうが自然です。アイコンを HTML の要素として書くため、SVG や img タグとも組み合わせやすいのがこの方式の利点です。
④ リストのマーカーをアイコンに変える
- Information text
- Check Point here
- 複数行になったときのぶら下がりインデントも、方式によって挙動が変わります。
現在: list-style: disc
<ul class="icon-list">
<li>Information text</li>
<li>Check Point here</li>
<li>複数行になったときのぶら下がりインデントも、方式によって挙動が変わります。</li>
</ul>.icon-list {
list-style: disc;
padding-left: 1.4em;
margin: 0;
}
.icon-list li {
margin: 0 0 8px;
font-size: 1rem;
color: #1e293b;
line-height: 1.7;
}
.icon-list li:last-child {
margin-bottom: 0;
}もっとも互換性が高い定番の方法です。ul に list-style: none と padding-left: 0 を指定してブラウザ標準の「・」を消し、li に position: relative と padding-left、疑似要素に position: absolute を組み合わせてアイコンを置きます。テキストが折り返しても2行目以降がアイコンの下に潜り込まず、きれいなぶら下がりインデントになるのがこの方式の強みです。
リストのマーカー部分だけを直接スタイリングできる新しい疑似要素です。list-style を消す必要がなく、content でアイコンを差し替えたり color だけ変えたりできます。記述量は最小ですが、指定できるプロパティが color・font 系・content などに限られており、位置の微調整はできません。細かく位置を詰めたい場合や古い環境も想定する場合は ::before 方式を選んでください。
⑤ content: ” — 図形・画像をアイコンにする
画像ファイルを用意しなくても、疑似要素だけでアイコンを描けます。
background を url() に差し替えれば、そのまま画像アイコンになります。
現在: border-radius: 4px
<p class="icon-item">画像ファイルを用意しなくても、疑似要素だけでアイコンを描けます。</p>
<p class="icon-item">background を url() に差し替えれば、そのまま画像アイコンになります。</p>.icon-item {
position: relative;
padding-left: 1.8em;
margin: 0 0 10px;
font-size: 1rem;
color: #1e293b;
line-height: 1.7;
}
.icon-item:last-child {
margin-bottom: 0;
}
.icon-item::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0.35em;
width: 16px;
height: 16px;
border-radius: 4px;
background: linear-gradient(135deg, #60a5fa, #2563eb);
}content に空文字を指定すると、文字を持たない「箱」としての疑似要素が生成されます。空文字でも content の指定自体は必須で、書き忘れると疑似要素は生成されません。あとは width・height でサイズを決め、background や border で見た目を作ります。border-radius: 50% で円、隣り合う2辺だけに border を引いて45度回転させればチェックマークと、画像なしで基本的な図形は一通り描けます。
用意した画像を使いたいときは、background の値を差し替えるだけです。background: url(‘icon.svg’) center / contain no-repeat; と書けば、width・height で指定した枠に画像が収まります。SVG なら拡大しても輪郭がぼやけず、ファイルサイズも小さく済むためアイコン用途に向いています。ただし疑似要素の画像はスクリーンリーダーに読み上げられないため、意味を持つアイコンには使わず、装飾用途に限定してください。
⑥ 応用 — アイコン付きの注意書きボックス
現在: すべて表示
<div class="info-box">Information: テキスト内容</div>
<div class="check-box">Check Point: テキスト内容</div>
<div class="warn-box">Warning: テキスト内容</div>.info-box,
.check-box,
.warn-box {
position: relative;
padding: 12px 16px 12px 48px;
border-radius: 8px;
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 10px;
}
.warn-box {
margin-bottom: 0;
}
.info-box::before,
.check-box::before,
.warn-box::before {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 1.2em;
line-height: 1;
}
.info-box { background: #eff6ff; color: #1e40af; }
.info-box::before { content: '\2139'; color: #2563eb; }
.check-box { background: #f0fdf4; color: #166534; }
.check-box::before { content: '\2714'; color: #16a34a; }
.warn-box { background: #fffbeb; color: #92400e; }
.warn-box::before { content: '\25B2'; color: #d97706; }アイコンを position: absolute で置くときは、親要素の padding-left にアイコン分の余白（例: 48px）を設定するのがポイントです。疑似要素は他の要素のレイアウトを押しのけないため、余白を確保しないとテキストがアイコンの下に潜り込みます。あとは content の Unicode 値と配色を変えるだけで種類を増やせるので、共通部分をまとめて書いておくとバリエーション展開が容易です。
⑦ Material Icons — フリーのアイコン素材を使う
現在: font-size: 1.4em
<!-- <head> 内に記述して読み込む -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- アイコンの使い方: テキストノードにアイコン名を書く -->
<div class="icon-item">
<span class="material-icons mi-info" aria-hidden="true">info</span>
<span>Information</span>
</div>
<div class="icon-item">
<span class="material-icons mi-check" aria-hidden="true">check_circle</span>
<span>Check Point</span>
</div>
<div class="icon-item">
<span class="material-icons mi-warn" aria-hidden="true">warning</span>
<span>Warning</span>
</div>
<div class="icon-item">
<span class="material-icons mi-fav" aria-hidden="true">favorite</span>
<span>Likes</span>
</div>.icon-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid #f0f4f8;
font-size: 1rem;
font-weight: 600;
color: #1e293b;
}
.icon-item:last-child {
border-bottom: none;
}
.icon-item .material-icons {
flex-shrink: 0;
font-size: 1.4em;
line-height: 1;
}
.mi-info { color: #2563eb; }
.mi-check { color: #16a34a; }
.mi-warn { color: #d97706; }
.mi-fav { color: #dc2626; }アイコンフォントは文字として描画されるため、大きさは font-size、色は color で制御します。em 単位で指定しておくと、親要素の文字サイズに追従して自動的に拡大縮小されるため、レスポンシブ対応が楽になります。並べたときの行の乱れを防ぐには line-height: 1 と flex-shrink: 0 をセットで指定しておくのが定石です。
Google が提供する無料のアイコン素材です。link タグで読み込んだあと、span class=”material-icons” の中にアイコン名をテキストとして書くだけで表示されます。アイコン名の一覧は Google Fonts Icons で検索できます。画像としてダウンロードして使うこともできますが、フォントとして読み込む方法ならサイズ変更・色変更が CSS だけで完結するため汎用性が高くなります。表示までに読み込み時間がかかると、一瞬アイコン名の文字列がそのまま見えることがある点だけ留意してください。
装飾目的のアイコンは、HTML要素で置く場合は aria-hidden=”true” を付けて読み上げ対象から外します。疑似要素（::before / ::marker）の content は、環境によっては記号名がそのまま読み上げられることがあるため、意味を持たない飾りとして使うのが安全です。逆に「削除」「エラー」などアイコン自体が意味を持つ場合は、必ずテキストラベルを併記するか、視覚的に隠したテキストを添えてください。色だけで状態を伝えないことも大切です。
よくある質問
アイコンがテキストに重なってしまいます。
原因はほぼ2つです。1つ目は親要素の padding-left 不足。position: absolute の疑似要素は他の要素を押しのけないため、アイコン幅ぶんの余白を自分で確保する必要があります。2つ目は親要素に position: relative を書き忘れているケースで、この場合アイコンは親ではなくさらに外側の要素を基準に配置されてしまい、まったく違う場所へ飛びます。①のデモのCSSが最小構成なので、指定漏れがないか見比べてみてください。
アイコンだけ色やサイズを変えたいです。
疑似要素は独立した要素として扱えるので、::before の側に color と font-size を書けばテキストと別々に指定できます。サイズは px ではなく em で指定するのがおすすめです。font-size: 1.2em と書けば常に本文の1.2倍になるため、スマホで本文サイズが変わってもアイコンだけ大きすぎる・小さすぎるという崩れが起きません。
外部リンクの「後ろ」にアイコンを付けたいです。
::before の代わりに ::after を使い、属性セレクタと組み合わせると、対象のリンクだけに自動でアイコンが付きます。a[target="_blank"]::after { content: '\2197'; margin-left: 0.25em; font-size: 0.9em; color: #64748b; } と書けば、別タブで開くリンクにだけ矢印が付きます。1つずつHTMLに書き足す必要がないため、記事数が多いサイトほど効果的です。
アイコンがスクリーンリーダーに読み上げられてしまいます。
HTMLの要素としてアイコンを置いている場合は aria-hidden="true" を付ければ読み上げ対象から外れます。疑似要素の場合は挙動が環境によって分かれるため、読み上げさせたくないなら content: '' と background-image で描く方式（⑤のデモ）が確実です。逆に content: '\2714' のような記号は、環境によっては「チェックマーク」と読み上げられます。
絵文字をアイコン代わりに使ってもいいですか？
手軽ですが、注意点があります。絵文字はOSごとに用意されたフォントで描画されるため、Windows・Mac・Android・iPhone で見た目が変わります。色も固定でCSSからは変更できません。トーンを揃えたいサイトでは、モノクロの記号（✔ ▲ ★ など）かアイコンフォント・SVGを使うほうが安定します。また、CMSやデータベースの文字コード設定によっては保存時に文字化けすることもあるため、本文中の絵文字は動作確認をしてから使ってください。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
