代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体图标应用</title>
<style>
@font-face {
font-family: 'FontAwesome';
src: url("css/fonts/fontawesome-webfont.eot");
src: url("css/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("css/fonts/fontawesome-webfont.woff2") format("woff2"), url("css/fonts/fontawesome-webfont.woff") format("woff"), url("css/fonts/fontawesome-webfont.ttf") formoat("truetype"), url("css/fonts/fontawesome-webfont.svg") format("svg");
font-weight: normal;
font-style: normal;
}
/*设置字体编码*/
.fa-weixin:before {
content: "\f1d7";
}
.fa {
color: green;
font: normal normal 5em FontAwesome;
/*优化字体渲染效果:抗锯齿技术，使字体更加平滑清晰（默认值）*/
-webkit-font-smoothing: antialiased;
/*优化字体渲染效果:次像素抗锯齿技术，进一步提高字体显示效果，但可能会出现颜色参差不齐的问题*/
/*-webkit-font-smoothing:subpixel-antialiased;*/
}
</style>
</head>
<body>
<i class="fa fa-weixin"></i>
<h5>微信公共平台开发</h5>
</body>
</html>
上述代码中：
第15行代码 “fa-weixin”是自定义的字体图标类名；
第16行代码，将content属性值设置为微信图标对应的编码，这个编码是使用UI设计师提供给前端人员的svg矢量图生成的，也可以在网上通过第三方网站获得。
运行效果
在fontawesome字体文件中，每个图标都有其对应的编码，编码保存在font-awesome.min.css文件中，我们使用字体图标时只需引用对应的class值。
扫一扫
1390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
