Icona a sinistra dell'intestazione a più linee

Question

Sto provando a visualizzare un'icona (carattere fantastico) a sinistra di un'intestazione, che attualmente funziona quando l'intestazione si trova su una singola riga, ma l'allineamento viene incasinato quando la voce va su una seconda linea.

Quello che attualmente si presenta come:

quello che voglio:

Ecco la forma più semplice di quello che ho (fiddle):

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

Ho ho provato a separare l'icona in un distinto h1, quindi a mostrare in float o inline ognuno di questi, ma poiché il testo su più righe non ha funzionato.

Qual è un modo pulito per ottenere questo allineamento che sto cercando?

Answer 1

Aggiungere questo

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

In questo caso, utilizzando il posizionamento assoluto sull'icona risolve il problema. Inoltre, regola il margine superiore per allinearlo al testo del titolo.

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

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

Answer 3

Un po 'tardi alla festa, ma se qualcun altro sta avendo lo stesso problema - si tratta di una soluzione semplice con i CSS Flexbox (che è un nuovo ... stile ish, ma a questo punto è supportato abbastanza bene).

(Nota per il codice qui sotto:. Si può avvolgere il <i> in un <div>, o qualcosa d'altro, se necessario, ma vorrei sconsigliare tra cui un secondo <h1> tag in quanto ciò potrebbe causare problemi di SEO In sostanza, è necessario la classe .wrapper . con due figli - uno come l'icona (o un div contenente l'icona), e uno come l'intestazione)

in primo luogo, il nuovo HTML:

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

e il nuovo CSS:

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

Nota: align-items: center; imposta l'allineamento verticale. Questo può anche essere flex-start (top-aligned) o flex-end (bottom-aligned) come desiderato.