Text vertikal neben der Schriftart ausrichten und justieren awesome icon

Question

Ich stelle einen "Kontakt" -Abschnitt auf meiner Website zusammen und habe Schwierigkeiten, die Informationen zu formatieren. Was ich möchte, ist eine vertikale Liste von Symbolen mit vertikal ausgerichtetem Text.

Für eine einzelne Zeile bedeutet dies, dass die Textzeile an der horizontalen Achse des Symbols ausgerichtet sein sollte.

Bei mehreren Zeilen sollte die erste Textzeile an der horizontalen Achse des Symbols ausgerichtet sein, und die nachfolgenden Zeilen sollten linksbündig mit der ersten Textzeile und nicht mit dem Symbol ausgerichtet sein. Ich kann mir nicht vorstellen, wie ich diesen Effekt erzielen kann.

Das ist, was ich bisher habe:

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>

hier ein JSFiddle meines Codes. Ich habe eine ungeordnete Liste mit dem Attribut <li>style deaktiviert verwendet.

Wie kann ich mein CSS ändern, um mein beschriebenes Layout zu erreichen?

Answer 1

Ich habe den Code von Ihrem JSFiddle an Ihre Anforderungen angepasst.

Die .fa und p Elemente sind nun mit einem inline-blockvertical-align von middle.

Zusätzlich fügte ich die fa-fw (Font Awesome fixed width) -Klasse zu Ihren Symbolen, wie erläutert here.

Beispiel unten:

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

Sieht aus wie ich auf den Stempel geschlagen wurde. Ganz ähnlich, nur entfernte ich die i und legte sie :before die li. Ich bevorzuge einfach Dinge in CSS, um bei Bedarf in anderen Bereichen der Site zu replizieren.

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>