<ul class=”ulMenu”>
<li>
<a href=”#”>
<i></i>
<span>
首页
</span>
</a>
</li>
<li>
<a href=”#”>
<i></i>
<span>
用户
</span>
</a>
</li>
<li>
<a href=”#”>
<i></i>
<span>
活动
</span>
</a>
</li>
<div style=”clear:both;”>
</div>
</ul>
给 i 添加样式：
.ulMenu li a i
{
display: inline-block;
width: 24px;
height: 24px;
margin-top: 17px;
margin-bottom: .25em;
font-size: 28px;
}
效果如下：
5. 网上定制的font字体现在附带很多常见图标（可参照 http://astronautweb.co/snippet/font-awesome/ ，字体可到此处下载）：
下载font字体，在样式文件中引用：
@font-face {
font-family: ‘FontAwesome’;
src: url(‘font/fontawesome-webfont.eot’);
src: url(‘font/fontawesome-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘font/fontawesome-webfont.woff’) format(‘woff’),
url(‘font/fontawesome-webfont.ttf’) format(‘truetype’),
url(‘font/fontawesome-webfont.svgz#FontAwesomeRegular’) format(‘svg’),
url(‘font/fontawesome-webfont.svg#FontAwesomeRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
6. 接着，我们可以用下面形似的样式来制定图标：
.css:before {
content: “f001”;
}
但是图标很多，我们可以直接引入下载的font文件下面css文件夹下的 font-awesome.css样式文件，也就是说，上面的一大堆字体文件引用都可以省略为（当然，真实开发中考虑到模块化引入css加载性能略影响，个人觉得应少用，希望有经验的前辈赐教）：
@import url(‘font-awesome.css’);
为 i 添加对应 css：
<ul class=”ulMenu”>
<li>
<a href=”#”>
<i class=”icon-home”>
</i>
<span>
首页
</span>
</a>
</li>
<li>
<a href=”#”>
<i class=”icon-user”>
</i>
<span>
用户
</span>
</a>
</li>
<li>
