在CSS中定位FontAwesome图标

Question

我有一个内部带有2 FontAwesome引用图标的h1 。 我决定用CSS控制他们的位置，因为我找不到任何实用的方法。 问题是我必须使用媒体查询使用不同的屏幕尺寸，并且我认为有一种更自动化的方式来执行此操作。

.fa-quote-left {
    position: relative;
    left: -20px;
    top: 15px;
    color: #34a7c1;
}
.fa-quote-right {
    position: relative;
    right: -95px;
    top: -17px;
    color: #34a7c1;
}

这是一个小提琴

Answer 1

无需显式设置引号图标元素的位置，您只需使用pull-left和pull-right辅助类来浮动它们。 尝试这个：

<h1> 
    <span class="fa fa-quote-left fa-flip-vertical pull-left"></span> 
    Neque porro quisquam est qui dolorem ipsum<br /> 
    and quia dolor sit amet, consectetur, adipisci velit..
    <span class="fa fa-quote-right pull-right"></span> 
</h1>

.fa-quote-left,
.fa-quote-right {
    color: #34a7c1;
}

小提琴的例子

Answer 2

我发现最好使用text-indent和引号填充，并使用<i>而不是<span> ;）检查一下

JS小提琴

编辑：

好的，希望这对您有用。

 @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); .quote { position: relative; padding: 0 40px 0 50px; } .quote .fa-quote-left, .quote .fa-quote-right { position: absolute; top: 50%; margin-top: -22px; color: #34a7c1; } .quote .fa-quote-left { left:0px; } .quote .fa-quote-right { right: 0px; } 

 <h1 class="quote"> <i class="fa fa-quote-left fa-flip-vertical"></i> Neque porro quisquam est qui dolorem ipsum <br> and quia dolor sit amet, consectetur, adipisci velit..<i class="fa fa-quote-right"></i> </h1> 

Answer 3

试试吧

推荐小提琴

刚用过

h1{position: relative}

.fa-quote-left {
   position: absolute;
    left: 0px;
    top: -10px;
    color: #34a7c1;
}

 .fa-quote-right {
          position: absolute;
    right: 0px;
    bottom: 0px;
    color: #34a7c1;
    padding-right: 51px;}