パーツ番号 07-07-09 ・ CSSのみ

数値バッジ付きアイコンセット

通知件数を示す小さな数値バッジをアイコン右上に添えた見本です。カート件数や通知件数の表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <span class="wrap"><svg viewBox="0 0 24 24"><path d="M12 3c-4 0-6 3-6 7v4l-2 4h16l-2-4v-4c0-4-2-7-6-7z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M10 20a2 2 0 0 0 4 0" fill="none" stroke="currentColor" stroke-width="1.8"/></svg><b class="badge">3</b></span>
          <span class="wrap"><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M3 7l9 6 9-6" fill="none" stroke="currentColor" stroke-width="1.8"/></svg><b class="badge">12</b></span>
          <span class="wrap"><svg viewBox="0 0 24 24"><path d="M3 5h2l2 11h11l2-8H6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><circle cx="9" cy="19" r="1.4" fill="currentColor"/><circle cx="17" cy="19" r="1.4" fill="currentColor"/></svg><b class="badge">5</b></span>
          <span class="wrap"><svg viewBox="0 0 24 24"><path d="M12 20c-6-4-9-7.5-9-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 3.5-3 7-9 11z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg><b class="badge">99</b></span>
        </div>

CSS

.d07-07-09 .row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:center}
        .d07-07-09 .wrap{position:relative;display:inline-flex}
        .d07-07-09 svg{width:30px;height:30px;color:#33455a}
        .d07-07-09 .badge{position:absolute;top:-8px;right:-10px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e2665a;color:#fff;font-size:11px;line-height:18px;text-align:center;font-style:normal;font-weight:700}

クラス名 .d07-07-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。