フォントの素晴らしいアイコンの横にテキストを縦に整列して正当化する

Question

私は自分のウェブサイトに「連絡先」セクションをまとめていますが、情報のフォーマットに問題があります。私が望むのは、縦に並んだテキストのアイコンの垂直リストです。

これは、テキストの行がアイコンの水平軸に揃えられることを意味します。

複数行の場合、テキストの最初の行はアイコンの水平軸に揃えられ、後続の行はアイコンではなくテキストの最初の行で左揃えにする必要があります。私はその効果を得る方法を理解することはできません。

これは私がこれまで持っているものです。

ul { 
 
    list-style: none; 
 
} 
 

 
p { 
 
    display: inline; 
 
} 
 

 
a { 
 
    font-size: 28px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<ul> 
 
    <li><a><i class="fa fa-5x fa-envelope"></i><p>Multi-line Address Line 1<br>Line 2</p></a></li> 
 
    <li><a><i class="fa fa-5x fa-at"></i><p><b>email</b> at <b>yahoo</b> dot <b>com</b></p></a></li> 
 
    <li><a href="#" target="_blank"><i class="fa fa-5x fa-linkedin"></i><p>LinkedIn</p></a></li> 
 
    <li><a href="#" target="_blank"><i class="fa fa-5x fa-github"></i><p>GitHub</p></a></li> 
 
</ul>

は、ここに私のコードのJSFiddleです。私は<li>style属性を無効にした順序のないリストを使用しています。

記述したレイアウトを実現するためにCSSを変更するにはどうすればよいですか？

Answer 1

要件に合わせてJSFiddleのコードを修正しました。

.faとpの要素は、であり、vertical-alignは、middleです。

さらに、hereのように、アイコンにfa-fw（フォントの固定幅）を追加しました。

以下の例：私はパンチに殴られたよう

ul { 
 
    list-style: none; 
 
} 
 

 
.fa, 
 
p { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
a { 
 
    font-size: 28px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<ul> 
 
    <li><a><i class="fa fa-fw fa-5x fa-envelope"></i><p>Multi-line Address Line 1<br>Line 2</p></a></li> 
 
    <li><a><i class="fa fa-fw fa-5x fa-at"></i><p><b>email</b> at <b>yahoo</b> dot <b>com</b></p></a></li> 
 
    <li><a href="#" target="_blank"><i class="fa fa-fw fa-5x fa-linkedin"></i><p>LinkedIn</p></a></li> 
 
    <li><a href="#" target="_blank"><i class="fa fa-fw fa-5x fa-github"></i><p>GitHub</p></a></li> 
 
</ul>

Answer 2

が見えます。私はiを取り除いて、:beforeのliを入れたことを除いて、ほとんど同じでした。私は、必要に応じてサイトの他の領域で複製するために、CSSに入ることを好むだけです。

ul { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    font-size: 28px; 
 
    display: inline-block; 
 
} 
 

 
li.address:before { 
 
    font-family: fontawesome; 
 
    content: '\f0e0'; 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
} 
 

 
li.email:before { 
 
    font-family: fontawesome; 
 
    content: '\f1fa'; 
 
    margin-right: 10px; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<ul> 
 
    <li class="address"><a>Multi-line Address Line 1<br>Line 2</a> 
 
    </li> 
 
    <li class="email"><b>email</b> at <b>yahoo</b> dot <b>com</b></li> 
 
</ul>