<li><a href="http://www.internetke.com/"><i class="icon-comments-alt"></i>博客</a></li>
<li><a href="http://www.internetke.com/"><i class="icon-picture"></i>导航</a></li>
<li><a href="http://www.internetke.com/"><i class="icon-info"></i>信息</a></li>
<li><a href="http://www.internetke.com/"><i class="icon-group"></i>团队</a></li>
<li><a href="http://www.internetke.com/"><i class="icon-question"></i>常见问题</a></li>
<li><a href="http://www.internetke.com/"><i class="icon-bar-chart"></i>案例</a></li>
<li><a href="http://www.internetke.com/"><i class="icon-envelope"></i>联系我们</a></li>
</ul>
</div>
<!--效果html结束-->
<div class="clear"></div>
</div>
</body>
</html>
2、CSS代码：
复制代码
@charset “utf-8”;
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px “宋体”; }
ul, ol, li {list-style-type:none;vertical-align:0}
.clear{height:0; overflow:hidden; clear:both}</p>
<p>@font-face {
font-family: ‘FontAwesome’;
src: url(‘font/fontawesome-webfont.eot?v=3.1.0’);
src: url(‘font/fontawesome-webfont.eot?#iefix&v=3.1.0′) format(’embedded-opentype’),
url(‘font/fontawesome-webfont.woff?v=3.1.0’) format(‘woff’),
url(‘font/fontawesome-webfont.ttf?v=3.1.0’) format(‘truetype’),
url(‘font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
/* FONT AWESOME CORE
* ————————– */
[class^=”icon-“],
[class*=” icon-“] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
[class^=”icon-“]:before,
[class*=” icon-“]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
