在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
答
我看到它是更好地与合作text-indent
和填充的报价,并使用<i>
代替<span>
;) 检查了这一点
编辑:
好了,希望这会为你工作 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>
答
没有必要明确地设置报价图标元件的位置,你可以只使用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;
}
答
试试吧
只是用
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;}
+0
是的,但不是平等对齐......他们有点歪 – Pantelis
+0
只是检查出来做了一些调整 –
我想报价是在两个句子中间对齐! – Pantelis
检查更新的答案:), 'margin-top'取决于你的'font-size' – Wardi