CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Helen3061371
Helen3061371

Reputation: 135

CSS position of icon

I have little trouble with positioning an icon, could you please help me? [Recent code]: http://bootply.com/112777 I am trying to position a ribbon icon at the left end of my line (I created the line by using border-top property on li element) Thanks a lot!

<div class="container">
   <div class="row">
     <div class="col-lg-7" id="top-banner">
       <ul>
         <li>
           <p class="sell1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> Ab nam amet enim aliquid veritatis eum! 
<i class="fa fa-bookmark-o"></i></li>
       </ul>
     </div>
  </div>
</div>

#top-banner li {
    list-style: none;
    border-top: 1px solid black; 
    width: 320px;
}
.sell1 {
    padding-left: 25px;
}

Upvotes: 0

Views: 1775

Answers (4)

steinmas
steinmas

Reputation: 398

If you're trying to have the icon be to the left of the black line, you won't be able to do this to the using the top border of the li tag.

I added some html above your p tag, that will simulate an icon with a black line next to it.

DEMO

 <li>   
     <div class="icon_container">
          <div class="icon"></div>
          <div class="line"></div>
     </div>
     <p class="sell1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> Ab nam amet enim aliquid veritatis eum! 
 </li>

.icon {
    display:inline-block;
    width:20px;
    height:20px;
    border:thin solid black;
}
.line {
    width:280px;
    height:15px;
    vertical-align:middle;
    display:inline-block;
    border-top:thin solid black;
}
#top-banner li {list-style: none; width: 320px; }

Upvotes: 1

Ghost Echo
Ghost Echo

Reputation: 2067

You might want to try absolute positioning a new <div> after <div class="row">

This method uses position: absolute; which will remove the element from the flow of the other elements. If this doesn't fit you could also float the surrounding elements or even use display:inline-block;. This can all depend on how you have your page setup.

new html

<div class="row"><div class="new"></div>

new css

.new {background-color:red;height:150px;width:25px;position:absolute;}
.row {position:relative;}

example: http://jsfiddle.net/4L54y/

Upvotes: 0

DreamTeK
DreamTeK

Reputation: 34177

I am only working on Guess work however assuming you want to add the icon before the first indented list-item you could use either of these options depending on your requirements:

1) Fixed a container in the top corner of your wrapping div.

#top-banner{    
  position:relative;
}
#top-banner:after{
    content:"";
    position:absolute;
    top:25px;
    left:35px;
    background:#b00;
    height:20px;
    width:20px;
}

http://jsfiddle.net/h67mP/

2) Simply set the background of the list item to top left and use padding.

.sell1 {
    background:url('Image.png') no-repeat 0 0;
    padding-left: 40px;
}

http://jsfiddle.net/h67mP/2/

3) Set the ALL list items to a background icon.

.col-lg-7 li{
  background:url('Image.png') no-repeat 0 20px;
  padding-left: 40px;
}

http://jsfiddle.net/h67mP/3/

Upvotes: 0

Shiva Avula
Shiva Avula

Reputation: 1836

You have to make your code like this. Please swap your awesome icon into the P tag so it comes on left of line.

<div class="container">
   <div class="row">
     <div class="col-lg-7" id="top-banner">
       <ul>
         <li>
           <p class="sell1"><i class="fa fa-bookmark-o"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> Ab nam amet enim aliquid veritatis eum! </li>
       </ul>
     </div>
  </div>
</div>

Here is a DEMO

If you need it after your paragraph, make it like this.

<div class="container">
   <div class="row">
     <div class="col-lg-7" id="top-banner">
       <ul>
         <li>
           <p class="sell1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
           <p>Ab nam amet enim aliquid veritatis eum!</p>
           <i class="fa fa-bookmark-o"></i>
          </li>
       </ul>
     </div>
  </div>

Here is a DEMO

Upvotes: 0

Related Questions