アイコンと共にテキストを配置する方法

2024-02-14 19:15 ウェブデザインアイコンテキスト配置 
<div class="icon-container">
 <img src="icon.png" alt="アイコン">
 <span>テキスト</span>
</div>
.icon-container {
 display: flex;
 align-items: center;
}

  • アイコンフォントを使用した方法: アイコンフォントは、特定の文字に対応するアイコンを提供します。テキスト内にアイコンの文字コードを挿入することで、アイコンを表示できます。

    <span class="iconfont">&#xe001;</span>
<span>テキスト</span>
    .iconfont {
 font-family: 'IconFont';
 /* アイコンフォントのフォントファミリーを指定します */
}

  • SVGを使用した方法: SVGはベクターベースの画像形式であり、アイコンをスケーラブルに表示できます。SVGファイルをアイコンとして使用し、テキストを隣に配置します。

    <svg class="icon" viewBox="0 0 24 24">
 <path d="M12 2..."></path>
</svg>
<span>テキスト</span>
    .icon {
 width: 24px;
 height: 24px;
 fill: currentColor;
}

    • これらは一部の方法ですが、ウェブデザインにおいて一般的に使用される手法です。コード例として挙げたものは一例であり、実際の使用に応じてスタイルや配置を調整することができます。