アイコンとテキストを横並びにする配置は、Webページでよく使用されます。ナビゲーションやリスト、リンク、ヘッダやフッタのリンクなど、さまざまなコンテンツで見かけますね。 アイコンとテキストを横並びに美しく揃えるスタイルシートのテクニック、調整用のスタイルシートを紹介します。 Tips for Aligning Icons to Text 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 Step 1: アイコンのフォーマットを決める Step 2: 同じようなサイズのアイコンを使う Step 3: アイコンのサイズにフォントのサイズを合わせる Step 4: 位置の調整はCSSを使う Step 5: 適用するアイコンのためにclass名を使う Step 1: アイコンのフォーマットを決める アイコン画像には、さまざまなフォーマットがあります。 SVG
![[CSS]アイコンとテキストを横並びに揃えるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/85b705179f3e6912f9af9967e46192ec99603556/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016070609.png)