Creating Content List Columns Using Entypo Font Icons

by on 24th April 2013 with No Comments

featured preview CSS3 input form transitions

There’s a general trend towards smaller “column listings” in homepage layouts. Specifically, tech startups and landing pages use this effect for promoting features in their products. But it’s a neat little design layout style for any purpose, and using icons in your design will break away from the normal template designs for an intriguing list display.

In this tutorial I want to demonstrate how we can use custom CSS3 webfonts as an icon inside the HTML. We will create a very basic startup website using the two-column list approach. All of the CSS is very straightforward, although you may need to do a bit of research on some of the properties. This effect is native to all standards-compliant browsers and renders perfectly on OS X or Windows.

Live DemoDownload Source Code

Downloading Fonts

I always recommend designers to check out the Entypo font set which is open source and free to download. The pack contains fonts of all the 4 major file types, and also has desktop versions for installing on Mac or PC. It also has a separate icon pack for social media buttons. We just need the Entypo web font family copied into a new directory named fonts. Here is the list of files I have included:

  • entypo.eot
  • entypo.svg
  • entypo.ttf
  • entypo.woff

I will demonstrate how to include this with CSS a bit later. Just be sure that everything is organized properly and ready to include on the page. Also my demo has a small images folder for the BG effects, but they are not pertinent to the whole layout. Simply download a copy of my demo if you want all the resources together.

First we should look at how the page is structured, and the plan for aligning everything perfectly.

Planning the HTML

We do not need to cover all the in-page HTML but just the important bits. First up is my header section which contains a link to the relative CSS file, plus some unique Google Webfonts. Note that our local CSS3 @font-face declaration will not affect these 3rd party fonts at all.

<!doctype html>
<html lang="en-US">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Homepage Columns with Entypo Font Icons</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="">
  <link rel="icon" href="">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="">

There is not too much out of the ordinary here, so we can move right into the body section. I am using an outer wrapper div with an internal #content container. This houses the entire inner page section along with the 2-column list items. The whole object is actually inside an unordered list using the ID #features.

<h2><span>Common Features</span></h2>
  <ul id="features" class="clearfix">
    <li class="feature">
      <span class="pictogram cloud">&amp;#59153;</span>
      <h4>Full Support for Cloud Data Storage with daily remote backups.</h4>
    <li class="feature">
      <span class="pictogram cart">&amp;#59197;</span>
      <h4>Obtain vouchers and coupons for saving money with online purchases.</h4>
    <!-- @end first row -->
    <li class="feature">
      <span class="pictogram phone">&amp;#128241;</span>
      <h4>After launch we will publish mobile apps for Android and iOS smartphones. Keep up with your profile when on-the-go.</h4>
    <li class="feature">
      <span class="pictogram pin">&amp;#59172;</span>
      <h4>Geolocation features help you to pinpoint hotspots with local retailers. Search for products or vendors by keyword.</h4>

    <!-- @end second row -->
    <li class="feature">
      <span class="pictogram shout">&amp;#128266;</span>
      <h4>Shout your posts to other major social networks including Facebook, Twitter, Tumblr, and Pinterest.</h4>

    <li class="feature">
      <span class="pictogram cap">&amp;#127891;</span>
      <h4>Earn points for idling IRC, posting frequent updates, inviting friends, and other similar activities. With enough bonus points you'll also be awarded cool profile badges.</h4>

I have added a .clearfix class onto the outer UL element so the container will push down the rest of the content on the page. Since all the internal list items are floating, we need some method of keeping the box model in check. Similarly each list item .feature contains both a span and a smaller headline.

The span uses our pictogram icons for displaying a specific design right next to the text. We have the ability to add more classes so that a list item may span the entirety of the page. Feature items are just the most basic container object where we have 2 listings per row. You will also notice the icon span has both a class for the special font-family, and a class for the type of icon we are displaying.

This secondary class is helpful if the icon is positioned in a strange location. If something is too big or too small, or awkwardly positioned then this direct class is easier to manipulate. And it also makes skimming through the HTML code a simple process. The final bit of codes are inside my styles.css file and it certainly isn’t too overly complicated.

Column Styles with CSS

The first interesting bit you will notice is at the very top of my file. Here we are using a new CSS3 font-face declaration to setup the icon fonts. By using a single family name we can import all 4 of the various file types at the same time.

@font-face {
    font-family: 'EntypoRegular';
    src: url('../fonts/entypo.eot');
    src: url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
         url('../fonts/entypo.woff') format('woff'),
         url('../fonts/entypo.ttf') format('truetype'),
         url('../fonts/entypo.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

The additional font-weight and font-style properties are not necessary – but definitely worth keeping. It doesn’t hurt to specify that our new font is not bold or italic by default. It is also a great template worth saving if you plan to use a lot of CSS3 web fonts.

.cols {
    -webkit-column-count: 2;  
    -moz-column-count: 2;  
    column-count: 2;  

This is another interesting bit of code which I did not show in the HTML. Basically I setup a paragraph of intro text which is broken into two columns using the newer CSS3 properties and the related vendor prefixes. Note this has nothing to do with the icons listing, but it is another method of generating columned content in your pages.

Now I have all the codes designated towards the main pictogram listing. Inside my pictogram class we are using the new family ‘EntypoRegular’ set to a default size of 8em. The icons are originally very small, so we need to ensure they are large enough to be placed right next to a block of sub-heading text.

/* homepage columns */
.pictogram {
  font-family: 'EntypoRegular';
  font-size: 8.0em;
  font-weight: normal;
  vertical-align: middle; 
  line-height: 0;
  margin-right: .1em;

#features { display: block; margin-bottom: 15px; }

#features .feature { display: block; float: left; width: 420px; padding: 8px 0; margin-right: 12px; margin-bottom: 22px; }
#features .feature h4 { 
  display: block; 
  font-weight: normal; 
  font-size: 1.7em; 
  line-height: 1.3em; 
  padding-left: 75px; 

#features .pictogram { display: block; float: left; position: relative; top: 20px; color: #363636; }

#features .cloud { font-size: 12em; }
#features .cart  { font-size: 12em; }
#features .phone { font-size: 12em; left: 12px; top: 30px; }
#features .pin   { font-size: 12em; left: 15px; top: 25px; }
#features .shout { font-size: 12em; }
#features .cap   { font-size: 12em; }

Each of the .feature items is limited to a width of 420px along with some internal padding. The spaces between each column provide a full 100% width to the unordered list. And inside the list items we have the pictograms floating left with relative positioning. You may be surprised how easy it is to keep each icon located at just the right place with a few minor additions.

The final block of code is a collection of all the different icon classes put together. I have individually sized each one at 12em because some icons do appear bigger or smaller than others. With this system you can pinpoint each individual set of icons to change how they appear. And since they are positioned relative to the container you may also use left/right/top/bottom properties for an easy alignment.

css3 webfonts entypo screenshot demo columns icons

Live DemoDownload Source Code

Final Thoughts

Although this isn’t a particularly difficult tutorial, the various stages for building a column list can be time consuming. You need to determine the perfect icon font and plan your written text so it fits just right.

This demo should provide a nice starting point to get the ball rolling. Spend a bit of time brainstorming your own ideas and how you can apply this design into similar layouts. Additionally if you have any comments or questions feel free to share in the comments discussion area below!

Comments & Discussion

About the Author