Using Font Awesome

by Solodev CMS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container font-awesome">
   <p>Using Font Awesome Icons for a Login Form</p>
   <div class="row">
      <div class="col-md-6">
         <div class="panel panel-default">
            <div class="panel-heading">
               <h3 class="panel-title">Login</h3>
            </div>
            <div class="panel-body">
               <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user" aria-hidden="true"></i>
                  </span>
                  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
               </div>
               <div class="input-group">
                  <span class="input-group-addon" id="basic-addon2"><i class="fa fa-key" aria-hidden="true"></i>
                  </span>
                  <input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon2">
               </div>
            </div>
         </div>
      </div>
   </div>
   <hr>
   <p>Common Font Awesome Use Cases</p>
   <div class="input-group">
      <span class="input-group-addon" id="basic-addon2"><i class="fa fa-phone" aria-hidden="true"></i>
      </span>
      <input type="text" class="form-control" placeholder="Phone #" aria-describedby="basic-addon2">
   </div>
   <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-usd" aria-hidden="true"></i>
      </span>
      <input type="text" class="form-control" placeholder ="00.00"aria-label="Amount (to the nearest dollar)">
      <span...

CSS

.input-group {
  margin-top: 10px;
  margin-bottom: 10px;
}
.font-awesome {
  margin-top: 25px;
}
.fa-facebook-square {
  color: #3b5998;
}
.fa-linkedin-square {
  color: #1985bc;  
}
.fa-twitter-square {
  color: #1da1f2;  
}
.fa-google-plus-square {
  color: #db4437  
}
.fa-pinterest-square {
  color: #bd081c;  
}
.red {
  font-size: 50px;
  color: 	#8B0000;
}

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;
  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}
.has-spinner.active {
  cursor:progress;
}
.has-spinner.active .spinner {
  opacity: 1;
  width: auto; /* This doesn't work, just fix for unkown width elements */
}

JavaScript

$(function(){
    $('.has-spinner').click(function() {
        $(this).toggleClass('active');
    });
});