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