css attr 利用特殊字体 图片 :before content

html code:

<li data-icon="a" class="col one-third step " id="plan"><h4>Plan</h4></li>

css code:

background: none repeat scroll 0 0 #D3404A;

    border-radius: 2.67em 2.67em 2.67em 2.67em;

    color: #FFFFFF;

    content: attr(data-icon); //图片关键方法

    display: inline-block;

    font-family: fontello;  //图标关键字体

    text-align: center;

    text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);

    width: 2.67em;

http://thehappybit.com/about/