テキストの前にアイコン デザイン見本
CSS の ::before 疑似要素と position、または flexbox を使ってテキスト先頭にアイコンを配置する実装デモ。コピーしてすぐ使えるコードを掲載しています。
① ::before 疑似要素 — アイコンの基本配置
Information text
Check Point here
Likes and more
現在: ::before { 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 8px;
font-size: 1rem;
line-height: 1.7;
}
.icon-item::before {
content: '\2714';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1em;
line-height: 1;
}content プロパティに Unicode エスケープシーケンス（例: ‘\2714’）を指定することで、アイコン代わりの文字・記号を疑似要素として配置できます。親要素に position: relative を指定し、疑似要素に position: absolute を組み合わせると、テキストを基準とした自由な位置指定が可能です。padding-left でアイコン分の余白を確保することが重要です。
使いたい記号・文字の Unicode コードポイントは、Google で「チェックマーク unicode」などと検索すると確認できます。コードポイントが「U+2714」のような形式で表示されたら、「U+」を除いた数字部分の前にバックスラッシュを付けて CSS に記述します（例: U+2714 → ‘\2714’）。記号の一覧は Symbl や Unicode 文字テーブル で検索・閲覧できます。
② top + transform: translateY() — 上下位置の微調整
複数行にわたる長いテキストのサンプルです。アイコンの上下位置がどのように変わるか確認してください。上端・中央・下端の違いを比べてみましょう。
現在: top: 0
<p class="icon-item">複数行にわたる長いテキストのサンプルです。top の値を変えるとアイコンの縦位置が変わります。</p>.icon-item {
position: relative;
padding-left: 1.8em;
line-height: 1.7;
}
.icon-item::before {
content: '\2714';
position: absolute;
left: 0;
top: 0;
font-size: 1em;
line-height: 1;
}アイコンを縦方向の中央に揃えるイディオムです。top: 50% は親要素の上端から50%の位置にアイコンの上端を配置しますが、その状態ではまだ中央より下にずれています。transform: translateY(-50%) でアイコン自身の高さの半分だけ上にずらすことで、視覚的な中央揃えが実現します。1行テキストには top: 50% + translateY(-50%)、複数行テキストには top: 0 が自然に見えます。
③ display: flex — よりシンプルな配置方法
現在: 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 8px;
}
.icon {
flex-shrink: 0;
font-size: 1em;
line-height: 1;
}flexbox を使うと position を使わずにアイコンとテキストを横並びにできます。align-items: center で縦方向の中央揃え、gap でアイコンとテキストの間隔を指定するだけとシンプルです。アイコン要素に flex-shrink: 0 を指定すると、テキストが折り返してもアイコンが縮まず崩れません。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.95em;
line-height: 1.6;
margin: 0 0 10px;
}
.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 値（’\2139′ など）を変えるだけで異なるアイコンに切り替えられるため、バリエーション展開が容易です。
⑤ Material Icons — フリーのアイコン素材を活用する
<!-- <head> 内に記述して読み込む -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- アイコンの使い方: テキストノードにアイコン名を書く -->
<div class="icon-item">
<span class="material-icons" aria-hidden="true">info</span>
<span>Information</span>
</div>
<div class="icon-item">
<span class="material-icons" aria-hidden="true">check_circle</span>
<span>Check Point</span>
</div>.icon-item {
display: flex;
align-items: center;
gap: 0.4em;
font-size: 1rem;
color: #333;
margin: 0 0 10px;
}
.icon-item .material-icons {
flex-shrink: 0;
font-size: 1.4em;
line-height: 1;
color: #2563eb;
}Google が提供するフリーのアイコン素材です。数百種類のアイコンを誰でも無料で利用できます。<link> タグで読み込んだあと、<span class=”material-icons”> の中にアイコン名をテキストとして書くだけで表示されます。アイコン名の一覧は Google Fonts Icons で検索できます。ダウンロードして画像として使うこともできますが、フォントとして読み込む方法のほうがサイズ変更・色変更が CSS だけで完結するため汎用性が高いです。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
