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

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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

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

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

公有302种图标任你选择；

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

支持ie6、7；

图例：

demo：

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

<!DOCTYPE html>

<html >

<head>

<!--

方法一：引入字体、图标样式

优点：直接引入css,在html里直接写入对应的css 样式名即可，不用查找css样式名对应的值

缺点：引入了没有用到的样式，代码冗余

href="css/font-awesome-ie7.min.css" /> 兼容ie6、7 -->

/*

方法二：自定义样式

优点：样式文件较小，只写自己需要的样式

缺点：需要查找每个样式对应的值，比较繁琐*/

@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#FontAwesomeRegula r') 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;lin e-height:40px;}

li:hover{color:#f60;}

</style>

</head>

<body>

<ul>

<li>

<span class="icon-home"></span> 首页

</li>

<li>

<span class="icon-smile"></span> 微笑

</li>

<li>

<span

class="icon-microphone"></span> 语音

</li>

<li>

<span

class="icon-rotate-left"></span> 返回

</li>

<li>

<span

class="icon-camera"></span> 相机

</li>

<li>

<span class="icon-globe"></span> 地球

</li>

</ul>

</body>

</html> 完整实例下载：

/share/link?shareid=538458&uk= 688556984