FA Table

by Rajesh Sitaraman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="wp-pl-container">
<h3>
Peetnik Links
</h3>
  <div id="wp-pl-row">
    <div id="wp-pl-row-left">
      <p><i class="fa fa-folder-open" style="color:#9A6B37;"></i></p>
      <p>Folder</p>
    </div>
    <div id="wp-pl-row-middle">
      <p><i class="fa fa-bar-chart" style="color:#BC7332;"></i></p>
      <p>
        Analytics
      </p>
    </div>
    <div id="wp-pl-row-right">
      <p><i class="fa fa-star" style="color:#862119;"></i></p>
      <p>
        Favorites
      </p>
    </div>
  </div>
  <div id="wp-pl-row">
    <div id="wp-pl-row-left">
      <p><i class="fa fa-user" style="color:#563D5C;"></i></p>
      <p>
        User
      </p>
    </div>
    <div id="wp-pl-row-middle">
      <p><i class="fa fa-file-text-o" style="color:brown;"></i></p>
      <p>
        Documents
      </p>
    </div>
    <div id="wp-pl-row-right">
      <p><i class="fa fa-cogs" style="color:#9A6B37;"></i></p>
      <p>
        Settings
      </p>
    </div>
  </div>
  <div id="wp-pl-row">
    <div id="wp-pl-row-left">
      <p><i class="fa fa-cube" style="color:green;"></i></p>
      <p>
        Link
      </p>
    </div>
    <div id="wp-pl-row-middle">
      <p><i class="fa fa-bullhorn" style="color:purple;"></i></p>
      <p>
        Link
      </p>
    </div>
    <div id="wp-pl-row-right">
      <p><i class="fa fa-comments" style="color:#177D91;"></i></p>
      <p>
        Link
      </p>
    </div>
  </div>
</div>

CSS

#wp-pl-container {
    display: table;
    padding-left:20px;
  }
  
  #wp-pl-row {
    display: table-row;
  }
  
  #wp-pl-row-left,
  #wp-pl-row-right,
  #wp-pl-row-middle {
    display: table-cell;
    padding-left: 40px;
    padding-right: 30px;
  }
  
  .fa {
    font-size: 30px;
  }