图标

2018-05-13 本文已影响10人好奇男孩

icon 的各种实现方式

a.使用 image 实现

注意事项：

img 的大小设置
可以只设置宽度／高度，图片会自适应缩放
img 的 vertical-align
请求数过多
因为每一个请求都是需要花时间去建立的，HTTP 1.1 时代，客户端（浏览器）是慢的，但如果升级到了 HTTP 2，100个请求跟1个请求是差不了多少的
在服务器端（server），比如是用 php、java 实现的后端，请求过多，一般会导致线程过多，或大或小都会产生一定的压力
另外，请求过多，对网站流量也会有一定的影响，流量要要花钱

b.CSS Sprite（css精灵/雪碧）

指将不同的图片/图标合并在一张图上，在使用时只显示出所需要的该图片的一部分，并且所有图片的引用链接都是一样的，从而能够减少向请求，提高网页加载性能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        .icon{
            /*border:1px solid red;*/
            width: 20px;
            height: 20px;
            background-image: 
              url("http://ww1.sinaimg.cn/large/006JM2pKgy1fp3942tx3lj301800m0j9.jpg") ;
            background-repeat: no-repeat;
            display: block;
        }
        .phone{
            background-position: -22px   0;
        }
        .time{
            background-position:  0px 0px;
        }

    </style>
</head>
<body>
    <span class=" icon phone"></span>
    <span class=" icon time"></span>
</body>

4.png

使用方法：

现在可以使用命令行：

google：npm css sprites，可以找到 sprity。通过文档中的 sprity-cli 来查看如何在命令行中使用它* 安装完成后，比如使用命令 sprity create build resource/*.png -s style.css。这里意思是将 resource 目录下的 png 格式图片生成 scripts 以及名为style.css的文件，并放在 build 目录下。这样我们就可以在代码中直接引用了，直接加上对应的 icon 类名即可

使用在线工具：CSS Sprites Generator
缺点：
无法缩放
不好修改

c.Icon Font 把字体做成图标

1.先设计新的字体:
可以通过 iconfont 来制作
2.形成字体文件（.eot、.ttf等供各种浏览器识别的字体文件）
3.利用无意义的unicode码与各个字体做好对应关系再定义类名形成CSS文件
4.利用线上或是本地链接方式，调用已定义好的该字体样式

  <style>
 @font-face {
  font-family: 'pengronghui';  /* project id 581087 */
  src: url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.eot');
  src: url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.woff') format('woff'),
  url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_581087_je7dxqjgbtaf9a4i.svg#iconfont') format('svg');
}
    p,h1{
      font-family:pengronghui;
      font-size:40px;
      color:red;
      text-shadow:1px 1px 4px rgba(255,0,0,0.4);
    }
  </style>
</head>
<body>
  <p>&#xeb78;</p>
  <h1>&#xe8c8;</h1>
</body>
</html>

6.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_581087_qb1kd9gpf7x03sor.css">
</head>
<body>
<span class="iconfont icon-moon"></span>
  <span class="iconfont icon-rain"></span>
</body>
</html>

8.png

c.SVG(推荐方法)

svg 可以作为图像的地址直接传入：<\img src="svg">，但是这样依然会造成请求数过多*
但是可以使用 SVG "sprites"；
svg-sprite
优点：
1.它是以标签的形式来组织所有的图片的（移动端首选）
2.可以方便的修改 icon 的大小、颜色，缩放没有锯齿

d. 用 CSS 画icon(不推荐使用)

要了解可参考：CSS ICON

图标