hinzufügen Top-Polsterung ehrfürchtige Symbole Schriftart

Question

Ich versuche nur auf die Schrift genial Symbol einig Top-Polsterung hinzuzufügen, aber wenn ich padding-top:10px oder margin-top:10px zum i Elemente gesetzt, es fügt auch, bevor es auf den Text padding.

Kann jemand helfen?

jsFiddle

i { 
 
    font-size: 30px; 
 
    padding-top: 10px; 
 
} 
 
.block { 
 
    background-color: #ccc; 
 
    padding: 10px; 
 
    max-width: 400px; 
 
    text-align: center; 
 
} 
 
.block-number { 
 
    background-color: #000; 
 
    color: #fff; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> 
 
<div class="block"> 
 
    <div class="block-number">2 to 4</div> 
 
    <i class="fa fa-large fa-camera-retro"></i> 
 
</div>

Answer 1

Ich bin mir nicht sicher, ob es möglich ist, mit anderen Verfahren zu tun, aber was ich in Ihrem Fall tun würde, das Symbol absolut positioniert.

i { 
 
    font-size:30px; 
 
    position: absolute; 
 
    padding-top: 8px; 
 
    padding-left: 10px; 
 
} 
 

 
.block { 
 
    background-color:#f1f1f1; 
 
    padding:10px; 
 
    max-width:400px; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 

 
.block-number { 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:10px; 
 
    display:inline-block; 
 
    font-size:20px; 
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 
 
<div class="block"> 
 
    <div class="block-number"> 
 
    2 to 4 
 
    </div> 
 
    <i class="fa fa-large fa-camera-retro"></i> 
 
</div>

Ich habe nicht die Antwort noch nicht, aber wenn Sie nur wollen, um den Text zu zentrieren und Symbol vertikal, Verwendung folgenden Code:

i { 
 
    font-size:30px; 
 
} 
 

 
.block { 
 
    background-color:#f1f1f1; 
 
    padding:10px; 
 
    max-width:400px; 
 
    text-align:center; 
 
} 
 

 
.block-number { 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:10px; 
 
    display:inline-block; 
 
    font-size:20px; 
 
} 
 

 
.block > * { 
 
    vertical-align: middle; 
 
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 
 
<div class="block"> 
 
    <div class="block-number"> 
 
    2 to 4 
 
    </div> 
 
    <i class="fa fa-large fa-camera-retro"></i> 
 
</div>

Answer 2

Da sowohl .block-number als auch font awesome <i> e lements sind Inline-Block gesetzt, so vertical-align Effekte nehmen, können Sie den Standardwert baseline-top usw.

.block-number, i { 
    ... 
    vertical-align: top; 
} 
i { 
    ... 
    padding-top: 10px; 
} 

ändern Es gibt eine andere Art und Weise durch ist position und top mit individuell <i> Element einzustellen.

i { 
    position: relative; 
    top: 10px; 
}