Creating Content List Columns Using Entypo Font Icons | Design Shack

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.