Font Awesome Examples

by rluuan

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
</head>
<body>
  

<div class="Contact_Wrapper hFlex">
  <div style='width: 50%; border-right: 1px solid #ddd; padding: 20px;'>
     <div style='flex-direction: column;'>
        <div class="row" style='border-bottom: 0.09px solid #00b0ff;'>
          DADOS DO CONTATO
        </div>
         <div class="row hFlex" style='margin-top: 20px;'>
           <div class="icon"><i class="fa fa-user"></i></div>
           <div class='contactData'>PERSON</div>
         </div>
         <div class="row hFlex">
           <div class="icon"><i class="fa fa-envelope"></i></div>
           <div class='contactData'>[email protected]</div>
         </div>
         <div class="row hFlex">
           <div class="icon"><i class="fa fa-phone"></i></div>
           <div class='contactData'>TELEFONE 1</div>
         </div>
         <div class="row hFlex">
           <div class="icon"><i class="fa fa-phone"></i></div>
           <div class='contactData'>TELEFONE 2</div>
         </div>
         <div class="row hFlex">
           <div class="icon"><i class="fa fa-whatsapp"></i></div>
           <div class='contactData'>WHATSAPP</div>
         </div>
     </div>
  </div>
  <div style='width: 100%;padding: 20px;'>
    <div style='flex-direction: column;'>
        <div...

CSS

.row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.hFlex {
  display: flex;
}
.Contact_Wrapper {
  padding: 20px;
  width: 100%;
}
.Contact_Wrapper div {
  /* border: 1px solid #ddd; */
}
.space-between {
  justify-content: space-between;
}
.Contact_Wrapper .icon {
  width: 50px;
  padding: 5px;
  align-items: center;
  height: 30px;
}
.Contact_Wrapper .contactData {
  width: 100%;
  padding: 5px;
  align-items: center;
  height: 30px;
}
.overflowInfoSuppliers {
  height: 500px;
  overflow-y: auto;
}