Question

我有一个h1，里面有2个FontAwesome引用图标。我决定用CSS控制他们的位置，因为我没有找到任何实用的方法。问题是不同的屏幕尺寸我必须使用媒体查询，我认为有一种更自动化的方法来做到这一点。

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

这是fiddle

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

Example fiddle

Answer 2

我认为最好使用text-indent并填充引号，并使用<i>代替<span>;）看看这个

JS Fiddle

编辑：

好的，希望这对你有用 Updated Fiddle

@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

试试吧

Referred Fiddle

刚刚使用了

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

在CSS

3 个答案: