Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding Feature Tiles to your Website with Font Awesome

Learn how to add feature tiles to your website using CSS and 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!

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev