CODEWITHSUNDEEP
csstwitter-bootstrap
Pantelis
Pantelis

Reputation: 339

Positioning FontAwesome icons in CSS

I have an h1 with 2 FontAwesome quote icons inside. I decided to control their position with CSS as I didn't find any practical way. The problem is with different screen sizes I have to use media queries and I think there is a more automated way to do this.

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

Here's a fiddle

Upvotes: 0

Views: 748

Answers (3)

Sai Deepak
Sai Deepak

Reputation: 688

Try it

Referred Fiddle

Just used the 

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

Upvotes: 0

Wardi
Wardi

Reputation: 81

I see it is better to work with text-indent and padding for the quotes, and use <i> instead of <span> ;) Check this out

JS Fiddle

EDIT:

Okay, Hope this will work for you 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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

There's no need to explicitly set the position of the quote icon elements, you can just use the pull-left and pull-right helper classes to float them. Try this:

<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

Upvotes: 2

Related Questions