CODEWITHSUNDEEP
htmlcssfont-awesome
RoyBarOn
RoyBarOn

Reputation: 987

How to display fa icon, p tag and span inline?

I'm trying to create a chat window that looks like this

enter image description here

I'm struggling with the right button which i can't place it in the same line height of the chat icon and the p tag....i want to do it a quick and efficient way , i know i could simply dived it all to div's and set margins and size - but i think perhaps there might be a better way.

Here is what I've done so far...

<div class="faq_chat">
  <div class="chat_con">
  <i class="fa fa-comments" aria-hidden="true"></i>
  <p>Welcome to some chat system, please</p>
  <br>
  <p>provide your first name or alias to start chat.</p>
  <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
 </div>


         .faq_chat {
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      height: 400px;
      background-color: #d2f1f0;
      z-index: 99;
      float: left;
    }

    .chat_con {
      float: left;
      line-height: 0.3;
      padding: 18px 14px 16px 21px;
      width: 100%;
      height: 60px;
      background-color: #5d3c95;
      color: white;
      border-bottom: 2px solid white;
    }

    .chat_con p {
      font-size: 10px;
    }

    .chat_con i,
    .chat_con p,
    .chat_con span {
      display: inline;
    }

    .fa-comments {
      font-size: 30px;
      margin-right: 15px;
    }

    .chat_input {
      width: 100%;
      height: 50px;
      background-color: #41c8c2;
      color: white
    }

Here is my Fiddle

Upvotes: 1

Views: 3040

Answers (4)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Make use of line-height and float property

Changes made in html

.faq_chat {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  height: 400px;
  background-color: #d2f1f0;
  z-index: 99;
  float: left;
}

.chat_con {
  float: left;
  line-height: 0.3;
  padding: 18px 14px 16px 21px;
  width: 100%;
  height: 60px;
  background-color: #5d3c95;
  color: white;
  border-bottom: 2px solid white;
}

.chat_con p {
  font-size: 10px;
}

.chat_con i,
.chat_con p,
.chat_con span {
  display: inline;
}

.fa-comments {
  font-size: 30px;
  margin-right: 15px;
}

.chat_input {
  width: 100%;
  height: 50px;
  background-color: #41c8c2;
  color: white
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix::after {
  content: "";
  display: table;
  width: 100%;
  clear: both;
}

.left-info {
  position: relative;
  padding-left: 35px;
}

.left-info i.fa-comments {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.left-info p {
  max-width: 60%;
  display: block;
  line-height: 14px;
}

.right-info p {
  line-height: 22px;
}
<div class="faq_chat">
  <div class="chat_con clearfix">
    <div class="float-left">
      <div class="left-info">
        <i class="fa fa-comments" aria-hidden="true"></i>
        <p>Welcome to some chat system, please provide your first name or alias to start chat.</p>
      </div>
    </div>
    <div class="float-right">
      <div class="right-info">
        <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
      </div>
    </div>
  </div>
</div>

Link for reference

Give This a Try..

Hope this Helps..

Upvotes: 1

Fadi Nouh
Fadi Nouh

Reputation: 354

You can give this a try

    <div class="faq_chat">
      <div class="chat_con">
         <p>Welcome enter code hereto some chat system, please</p>
         <p>provide your first name or alias to start chat.</p>
         <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
      </div>
    </div>


    .faq_chat {
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      height: 400px;
      background-color: #d2f1f0;
      z-index: 99;
      float: left;
    }

    .chat_con {
      float: left;
      line-height: 0.3;
      padding: 18px 14px 16px 21px;
      width: 100%;
      height: 80px;
      background-color: #5d3c95;
      color: white;
      border-bottom: 2px solid white;
    }

  .chat_con:before {
      font: normal normal normal 14px/1 FontAwesome;
      content: "\f086";
      font-size: 30px;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      margin-top:-5px;
      margin-right:15px;
      float:left;
    }

    .chat_con p {
      font-size: 10px;
      width:80%;
      float:left;
    }

    .chat_con p:last-child {
      position:absolute;
      right: 45px;
      top: 58px;
      width:50px;
    }

    .chat_con i, .chat_con p, .chat_con span {
      display: inline;
    }

    .fa-comments {
      font-size: 30px;
      margin-right: 15px;
    }

    .chat_input {
      width: 100%;
      height: 50px;
      background-color: #41c8c2;
      color: white
    }

Upvotes: 1

Jared Chu
Jared Chu

Reputation: 2862

I use flexible box to make your CSS shorter.

.faq_chat{
  background: #5d4290;
  color: white;
  padding: 10px 0;
}

.chat_con{
  display: flex;
}

.chat_con .fa-comments{
  font-size:30px;
  padding: 5px 10px 0 20px;
}

.chat_con p{
  padding: 0;
  margin: 0;
}

.chat_con .fa-circle{
  color: red;
}

.chat_con .flex-item:last-child {
  margin-left: auto;
  padding: 10px 10px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="faq_chat">
  <div class="chat_con">
  
    <div class="flex-item">
      <i class="fa fa-comments" aria-hidden="true"></i>
    </div>
    
    <div class="flex-item">
      <p>Welcome to some chat system, please</p>
      <p>provide your first name or alias to start chat.</p>
    </div>
    
    <div class="flex-item">
      <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
    </div>
    
  </div>
</div>

Upvotes: 0

Sarath Hari
Sarath Hari

Reputation: 219

HTML

 <div class="faq_chat">
  <div class="chat_con">
  <div class="msgicon"> 
  <i class="fa fa-comments" aria-hidden="true"></i>
  </div>
  <div class="content">
    <p>Welcome to some chat system, please</p>
    <p>provide your first name or alias to start chat.</p>  
  </div>
  <div class="circle">
      <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p>
  </div>

  </div>
</div>

CSS

  .faq_chat {
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      height: 400px;
      background-color: #d2f1f0;
      z-index: 99;
      float: left;
    }

    .chat_con {
      position:relative;
      float: left;
      line-height: 0.3;
      padding: 20px;
      width: 100%;
      height: 60px;
      background-color: #5d3c95;
      color: white;
      border-bottom: 2px solid white;
    }

    .chat_con p {
      font-size: 10px;
    }
    .fa-comments {
      font-size: 30px;
      margin-right: 15px;
      line-height: 0.6;          
    }

    .chat_input {
      width: 100%;
      height: 50px;
      background-color: #41c8c2;
      color: white
    }
    .msgicon{
        display: block;
        float: left;  
    }
    .circle{
        position: absolute;
        right: 15px;
        top: 25px;
    }

Upvotes: 0

Related Questions