フォントの位置付け驚くばかりのアイコン

Question

私は素晴らしいフォントから得た引用符のアイコンを使用するサイト上のセクションを持っています。私はそれにいくつかのスタイル規則を適用しましたが、それは私が直接引用のためのテキストの上の容器の真ん中に完全に座ってアイコンを必要

移動することができません。ここに私のコードは、これまで

section#quote { 
 
    height: 400px; 
 
    max-width: 100%; 
 
    background-color: #000080; 
 
} 
 

 
section#quote h2 { 
 
    text-align: center; 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
    color: #FFFFFF; 
 
    margin: 30px; 
 
    margin-left: 150px; 
 
    margin-right: 150px; 
 
} 
 

 
section#quote p { 
 
    text-align: center; 
 
    font-size: 10px; 
 
    color: #FFFFFF; 
 
} 
 

 
section#quote i { 
 
    display: inline-block; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="twelve columns"> 
 
    <i class="fa fa-quote-right fa-large" aria-hidden="true" style="color: #FFFFFF; margin-top: 20PX;"></i> 
 
    <h2>Working with Feature Media was great! They were very flexible and accomodating to our requirements. We will continue to work with FM.</h2> 
 
    <P>Victoria Mellor, International Marketing Manager, Melett</P> 
 
</div>

Answer 1

body { 
 
    background-color: blue; 
 
} 
 

 
quote { 
 
    position: relative; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
quote i { 
 
    position: relative; 
 
    font-size: 40px; 
 
    line-height: 1; 
 
    top: 10px; 
 
    color: #FFFFFF; 
 
} 
 
quote span { 
 
    display: block; 
 
    color: #FFF; 
 
    text-align: center; 
 
    font-size: 46px; 
 
}

<quote> 
 
    <i class="fa fa-quote-right fa-large">"</i> 
 
    <span>Lorem ipsum door sit amet</span> 
 
</quote>

Answer 2

body { 
 
    background-color: blue; 
 
} 
 

 
quote { 
 
    position: relative; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
quote i { 
 
    position: relative; 
 
    font-size: 40px; 
 
    line-height: 1; 
 
    top: -10px; 
 
    color: #FFFFFF; 
 
} 
 
quote span { 
 
    display: inline-block; 
 
    color: #FFF; 
 
    text-align: center; 
 
    font-size: 46px; 
 
}

<quote> 
 
    <i class="fa fa-quote-right fa-large">"</i> 
 
    <span>Lorem ipsum door sit amet</span> 
 
</quote>