Adding Feature Tiles to your Website with Font Awesome

Displaying the features of your product and/or services is important on your website. While some may use plain text with bullet points, others tend to lean more on the visual side of things to display their features. Using visuals to communicate your features to website visitors has become increasingly more popular to the point of being a best practice. Providing visual context to the features gives your website visitors a more immediate understanding of your overall offering. In this article, Solodev will teach you how to add feature tiles containing Font Awesome icons to your website. Enjoy!

Below is the HTML, CSS, and JavaScript required.

Step 1 — feature-tiles.html

Copy and paste the code below into feature-tiles.html

<section class="main-content">
  <div class="container">
    <h2>WebCorpCo does data better.</h2>
    <h3>These are just some of the features of WebCorpCo.</h3>
    <div class="row">
      <div class="col-md-4 col-sm-6">
        <div class="ct-featureBox">
          <div class="inner">
            <div class="image">
              <i class="fa fa-tachometer" aria-hidden="true"></i>
            </div>
            <h4>Dashboards</h4>
            <p>WebCorpCo. Meaninful data. Powerful insight.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6">
        <div class="ct-featureBox">
          <div class="inner">
            <div class="image">
              <i class="fa fa-pie-chart" aria-hidden="true"></i>
            </div>
            <h4>Semantic Analysis</h4>
            <p>Adding context to mountains of data.</p>
          </div>
        </div>
      </div>
      <div class="clearfix visible-sm"></div>
      <div class="col-md-4 col-sm-6">
        <div class="ct-featureBox">
          <div class="inner">
            <div class="image">
              <i class="fa fa-clock-o" aria-hidden="true"></i>
            </div>
            <h4>Realtime Data</h4>
            <p>No refreshing your browser. All data is analyzed in realtime.</p>
          </div>
        </div>
      </div>
      <div class="clearfix visible-md"></div>
      <div class="col-md-4 col-sm-6">
        <div class="ct-featureBox">
          <div class="inner">
            <div class="image">
              <i class="fa fa-database" aria-hidden="true"></i>
            </div>
            <h4>Data Driven</h4>
            <p>Pull data from any source, including your own databases.</p>
          </div>
        </div>
      </div>
      <div class="clearfix visible-sm"></div>
      <div class="col-md-4 col-sm-6">
        <div class="ct-featureBox">
          <div class="inner">
            <div class="image">
              <i class="fa fa-cube" aria-hidden="true"></i>
            </div>
            <h4>Machine Learning</h4>
            <p>More data, more time, more insight.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6">
        <div class="ct-featureBox">
          <div class="inner">
            <div class="image">
              <i class="fa fa-mobile" aria-hidden="true"></i>
            </div>
            <h4>Mobile App</h4>
            <p>Access WebCorpCo on any Internet connected device.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Step 2 — feature-tiles.css

Download the CSS below and include it in your web page

feature-tiles.css

Step 3 — Add the includes below to your web page

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="feature-tiles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In this tutorial we showed you how to add feature tiles to your website using Font Awesome and CSS. Now you can customize the design and make it your own!

Demo on JSFiddle

Download from GitHub

Originally posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.