WEB前端 网页图标

本文是学习笔记，只是记录，并非原创。

网页图标的几种方式比较

	css sprite	font & html	font & css
原理	背景图片定位	@font-face
兼容性	支持	支持	低版本IE不支持
图标颜色	丰富	单一
缩放	失真	不失真
后期维护	困难	简单

css sprite

通过background-image和background-position进行切割

font&html

引入字体文件，利用css伪类添加图标 || 在标签中直接写图标编码

@font-face {
font-family: 'icomoon';
src:  url('../fonts/icomoon.eot?lyboi0');/*兼容IE9*/
src:  url('../fonts/icomoon.eot?lyboi0#iefix') format('embedded-opentype'),/*?#iefix解决IE6-8图标无法显示问题*/
url('../fonts/icomoon.ttf?lyboi0') format('truetype'),
url('../fonts/icomoon.woff?lyboi0') format('woff'),
url('../fonts/icomoon.svg?lyboi0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

.icon {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon:before{
content:'\图标代码';
}

<span class="icon"></span>

html&css

添加class进行添加图标

@font-face {
font-family: 'icomoon';
src:  url('../fonts/icomoon.eot?lyboi0');
src:  url('../fonts/icomoon.eot?lyboi0#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?lyboi0') format('truetype'),
url('../fonts/icomoon.woff?lyboi0') format('woff'),
url('../fonts/icomoon.svg?lyboi0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

.icon {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-heart:before {
content: "\e900";
}

<div class="col-md-2">
<span class="icon icon-truck"></span>
</div>

图标资源网站 icomoon.in

syj 2016.8.1