icon小图标的使用

icon小图标的使用

---

适当的图标，可以达到一图胜千言的效果。

• css sprite
• font + HTML
• font + css

---

css sprite简介：

在国内被称为“css雪碧图”，也叫“css图片精灵”。
它是把网页中一些零星的小图片整合到一张图片文件中个，在利用css的背景图片 定位到要显示的位置，因此也叫做“图片拼合”技术。

好处：

这样做可以减少文件体积和服务器请求次数，从而提高效率

坏处：

就是很难调试

特点：

1. 相对单个想想小图标，它节省文件体积和服务器请求次数
2. 一般情况下，你需要保存为pbg-24的格式
3. 可以设计丰富多彩的图标颜色

难点：

1. 需要预先确定每个图片的大小
2. 注意小图标与小图标之间的距离

技术要点：
background-image:
background-position:

---

font + HTML 图标字体

使用图标字体可以大大减少前端工作量

1. 灵活性：轻松的改变图标的颜色以及其他css效果 例如：background
2. 可扩展性：改变图标的大小，就先改变字体大小一样简单 例如：font-size
3. 矢量性：图标是矢量的，与像素无关，缩放图标不会影响清晰度 在pc 平板 手机上都能使用
4. 支持性：支持所有现代浏览器 包括IE6；
5. 本地使用：通过添加定制字体到你的本地系统，你可以再各种不同的设计和变成应用程序中使用它们

推荐： IcoMoon

网址：https://icomoon.io/

<i class="icons icon-i"> &#x343a; <i><i class="icons icon-ui"> &#x3448; <i>


.icons{
  display:inline-block;*display:inline;*zoom:1;
  font-style: normal;  
}
@font-face{
  font-family: mui-global-iconfont; //名称
  //路径
  src:url(fonts/font_icons_ui.eot);                                       /* IE9*/
  src:url(fonts/font_icons_ui.eot?#iefix) format('embedded-opentype'),    /* IE6-IE8 */
    url(fonts/font_icons_ui.woff) format('woff'),      /* chrome、firefox */
    url(fonts/font_icons_ui.ttf) format('truetype'),   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url(fonts/font_icons_ui.svg#iconfont) format('svg')  /* iOS 4.1- */
  }
.icon-i{
  font-family: mui-global-iconfont !important;
  font-size: 22px;
  color: #c40000;
}

@font-face:

EOT 格式

它是微软开发的用于嵌入网页中的字体，ie专用字体

woff

web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版本。2009年被开发，如今被w3c组织推荐

TTF

1980年，由Microsoft和Apple联合开发的一套字体标准，是Mac OS和WINv操作系统中最常见的一种字体

svg

用于svg字体渲染的一种格式，它是由w3c定制的开放标准的图形格式

---

font + css 图标字体

使用before content元素
例如：

a:before{
    content:'\e908';
}