在CSS中定位FontAwesome图标

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

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

这里有一个fiddle

来源

2015-07-28 Pantelis

我看到它是更好地与合作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>

来源

2015-07-28 09:53:16 Wardi

我想报价是在两个句子中间对齐！ – Pantelis

检查更新的答案:)， 'margin-top'取决于你的'font-size' – Wardi

没有必要明确地设置报价图标元件的位置，你可以只使用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

来源

2015-07-28 09:45:48

试试吧

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

来源

2015-07-28 09:49:57

是的，但不是平等对齐......他们有点歪 – Pantelis

只是检查出来做了一些调整 –

在CSS中定位FontAwesome图标

回答

相关问题