CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jenssen
Jenssen

Reputation: 1871

Icon on same line

In my project I'm using bootstrap. But I've got this frustrating problem where the mail icon won't go on the same line.

Currently I've got this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div class="panel panel-primary">
     <div class="panel-heading">
       <div class="row">
         <div class="col-md-10">
           <a style="color: white;" href="#">Username</a> -
           <a style="color:white;" href="#">Corporation</a> 
           <i class="material-icons">&#xE0BE;</i>
         </div>

         <div class="col-md-2">
           <p>time</p>
         </div>
       </div>

     </div>
     <div class="panel-body">
       <div class="row" style="border-bottom: 1px solid black">
         <div class="col-md-12 panel-body-margin-bottom">
           <h3>subject</h3>
         </div>
       </div>

       <div class="row trix-content">
         <div class="col-md-12 panel-body-margin-top">
           <p>Message</p>
         </div>
       </div>
   </div>

Any idea how I could fix this (without margin-top)

Upvotes: 0

Views: 223

Answers (2)

Rajesh Nadar
Rajesh Nadar

Reputation: 167

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div class="panel panel-primary">
     <div class="panel-heading">
       <div class="row">
         <div class="col-md-10" >
           <span style="vertical-align:super;"><a style="color: white;" href="#">Username</a> -
           <a style="color:white;" href="#">Corporation</a> </span>
           <span><i class="material-icons" style="    font-size: 19px;">&#xE0BE;</i></span>
           
         </div>

         <div class="col-md-2">
           time
         </div>
       </div>

     </div>
     <div class="panel-body">
       <div class="row" style="border-bottom: 1px solid black">
         <div class="col-md-12 panel-body-margin-bottom">
           <h3>subject</h3>
         </div>
       </div>

       <div class="row trix-content">
         <div class="col-md-12 panel-body-margin-top">
           <p>Message</p>
         </div>
       </div>
   </div>

Upvotes: 1

Neil
Neil

Reputation: 14313

This looks significantly prettier. The vertical-align will force it to center it on the line properly. But then I noticed it was still just a little off, so I used margin-top:-3px to make it look just a bit better.

<i class="material-icons" style="margin-top:-3px;vertical-align:middle;">&#xE0BE;</i>

Full code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div class="panel panel-primary">
     <div class="panel-heading">
       <div class="row">
         <div class="col-md-10">
           <a style="color: white;" href="#">Username</a> -
           <a style="color:white;" href="#">Corporation</a> 
           <i class="material-icons" style="margin-top:-3px;vertical-align:middle;">&#xE0BE;</i>
         </div>

         <div class="col-md-2">
           <p>time</p>
         </div>
       </div>

     </div>
     <div class="panel-body">
       <div class="row" style="border-bottom: 1px solid black">
         <div class="col-md-12 panel-body-margin-bottom">
           <h3>subject</h3>
         </div>
       </div>

       <div class="row trix-content">
         <div class="col-md-12 panel-body-margin-top">
           <p>Message</p>
         </div>
       </div>
   </div>

Upvotes: 1

Related Questions