定位Font Awesome图标

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;