网页常见图标用自定义字体实现

飞鹰飞龙飞天 2015-03-01

展开全文

Font Awesome 官网(fontawesome-webfont的字体)：http://fortawesome./Font-Awesome/

简介：让你可以即时定制的可伸缩矢量图标；

　　　公有302种图标任你选择；

　　　图标的风格，如：大小、颜色、阴影可以通过css样式修改；

　　支持ie6、7；

图例：

demo：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<meta name="author" content="@my_coder">
<title></title>
<!--
方法一：引入字体、图标样式
优点：直接引入css,在html里直接写入对应的css样式名即可，不用查找css样式名对应的值
缺点：引入了没有用到的样式，代码冗余
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" /> 兼容ie6、7
-->
<style type="text/css">
/*
方法二：自定义样式
优点：样式文件较小，只写自己需要的样式
缺点：需要查找每个样式对应的值，比较繁琐
*/
@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;
}
.icon-home:before{
content: "\f015"; /*'\f015'代表‘家’的图标，每个图标有对应的值*/
}
.icon-home { /*兼容ie6、7*/
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '?');
}
li{font-family: 'FontAwesome';font-size:30px;display:block;color:#aaa;line-height:40px;}
li:hover{color:#f60;}
</style>
</head>
<body>
<ul>
<li>
首页
</li>
<li>
微笑
</li>
<li>
语音
</li>
<li>
返回
</li>
<li>
相机
</li>
<li>
地球
</li>
</ul>
</body>
</html>