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">&#xe920</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