Ikona po lewej stronie wielowierszowego nagłówka

Question

Próbuję wyświetlić ikonę (czcionka niesamowita) po lewej stronie nagłówka, który aktualnie działa, gdy nagłówek jest w jednym wierszu, ale wyrównanie zostaje pomieszane, gdy nagłówek przechodzi na drugą linię.

Co to obecnie wygląda następująco:

Czego chcę:

Oto najprostsza forma, co mam (fiddle):

<div> 
    <h1><i class="fa fa-file-text fa-fw fa-lg"></i>Multi-line Title</h1> 
</div> 

Ja próbowałem oddzielić ikonę na oddzielny h1, a następnie uaktywnić wyświetlanie pływające lub wbudowane, ale ponieważ jest to tekst wielowierszowy, nic z tego nie zadziałało.

Jaki jest czysty sposób na uzyskanie tego dopasowania, którego szukam?

Answer 1

Dodaj

div h1 { 
display: inline-block; 
position: relative; 
padding-left: 55px; 
vertical-align: middle; 
} 

div h1 i { 
position: absolute; 
left: 0; 
top: 50%; 
margin-top: -10px; // half height of icon 
} 

Fiddle

Answer 2

W tym przypadku, używając pozycjonowanie bezwzględne ikonę rozwiązuje problem. Poza tym dostosuj górny margines, aby dopasować go do tekstu tytułu.

Fiddle: https://jsfiddle.net/0fadtcm7/

div h1 i { 
    position: absolute; 
    margin-left: -55px; 
    margin-top: 3px; 
} 
div h1 { 
    padding-left: 55px; 
} 

Answer 3

Trochę późno do partii, ale jeśli ktoś jest o ten sam problem - to łatwo naprawić z CSS schematu flexbox (który jest nowy ... owski styl, ale w tym momencie jest dość mocno wspierany).

(Uwaga na kod poniżej. Można owinąć <i> w <div>, czy coś innego, jeśli jest to konieczne, ale radziłbym przeciwko tym drugą <h1> tag jako że mogłoby spowodować problemy SEO Zasadniczo trzeba klasę .wrapper . z dwójką dzieci - jedno jako ikonę (div zawierającego ikony), a jeden jako nagłówka)

po pierwsze, nowy HTML:

<div> 
    <i class="fa fa-file-text fa-fw fa-lg"></i> 
    <h1>Multi-line Title</h1> 
</div> 

a nowy CSS:

div { 
    display: flex; 
    align-items: center; 
} 

Uwaga: align-items: center; ustawia wyrównanie pionowe. Może to być również flex-start (wyrównany do góry) lub flex-end (wyrównany do dołu) według potrzeb.