项目引入图标的一些方式

  1. 传统的图片图标

    • 图片

      最基本的一种方式,一个图标就是一张图片,缺点在于每个不同的图标都要进行一次请求才能获取到图片文件。

    • 雪碧图

      将网页中的图标和背景图片都整合到一张大的图片中,利用CSS的背景定位来显示需要的部分,主要用到background-position属性。

      好处是减少加载图片的请求次数,但小图标之间的距离要确定好,避免相邻的图片露出来,不建议把雪碧图做得太复杂。

      .icon {
          width: 100px;
          height: 100px;
        background: url(img/spirit.png);
          background-repeat: no-repeat;
          /* 把background-attachment设置为fixed,才能保证background-position属性在Firefox和Opera中正常工作 */
          background-attachment: fixed;
          /* background-position用于在雪碧图中定位到特定的图标,默认值为0% 0%,可以用px等CSS单位,也可以用百分比,仅设置一项时,另一项默认为50% */
          background-position: 100px 100px;
      }
      
  1. 现在常用的字体图标

    字体图标优点:

    • 图标矢量化

    • 本质上是字体,可以用CSS灵活控制图标的尺寸(font-size)、颜色(color)、阴影(text-shadow)等

    • 各大平台如Iconfont(https://www.iconfont.cn/home/index)、Font Awesome(http://www.fontawesome.com.cn/)、IconMoon(https://icomoon.io/
      )等图标丰富,可方便找到自己需要的图标,或把自己的图标上传

3种引入方式:

  • 方式1:Unicode(最原始,兼容性最好IE6+,支持单色或用background实现的渐变色)

    /* css,下面的路径为Iconfont生成的cdn路径,或下载至本地后的本地路径 */
    @font-face {
      font-family: 'iconfont';
      src: url('//at.alicdn.com/t/font_1503959_fx1tzdurig.eot');
      src: url('//at.alicdn.com/t/font_1503959_fx1tzdurig.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_1503959_fx1tzdurig.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_1503959_fx1tzdurig.woff') format('woff'),
      url('//at.alicdn.com/t/font_1503959_fx1tzdurig.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_1503959_fx1tzdurig.svg#iconfont') format('svg');
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    
    
    

    或者

    /* css */
     @font-face {
       font-family: 'iconfont';
       src: url('//at.alicdn.com/t/font_1503959_fx1tzdurig.eot');
       src: url('//at.alicdn.com/t/font_1503959_fx1tzdurig.eot?#iefix') format('embedded-opentype'),
       url('//at.alicdn.com/t/font_1503959_fx1tzdurig.woff2') format('woff2'),
       url('//at.alicdn.com/t/font_1503959_fx1tzdurig.woff') format('woff'),
       url('//at.alicdn.com/t/font_1503959_fx1tzdurig.ttf') format('truetype'),
       url('//at.alicdn.com/t/font_1503959_fx1tzdurig.svg#iconfont') format('svg');
     }
     .iconfont {
       font-family: "iconfont" !important;
       font-size: 16px;
       font-style: normal;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
     .icon-icongouwuche:before {
       content: "\e6c1";
     }
    
    
    
    
  • 方式2:Font class(推荐,Unicode方式的便利版,使用更直观,兼容性良好IE8+,支持单色或用background实现的渐变色)

    为什么说是方式1的便利版?因为引入的这个CSS文件的内容,就是上面方式1中我们需要手动加入的CSS代码。

    
    
    
    
    

    Unicode和Font class方式支持用background实现的渐变色:

    
    
    
    /* css */
    .color1 {
      /* 从左下角至右上角的线性渐变背景颜色 */
      background-image: -webkit-linear-gradient(left bottom, #fb2c61, #fac362);
    }
    .icon-icongouwuche {
      /* 限定背景的绘制区域为文字部分 */
      -webkit-background-clip: text;
      /* 文字填充颜色 */
      -webkit-text-fill-color: transparent;
      font-size: 100px !important;
    }
    
  • 方式3:Symbol(兼容性一般,IE9+及现代浏览器,支持多色

引用的js控制svg写入body进行引用

/* css,下面的路径为Iconfont生成的cdn路径,或下载至本地后的本地路径 */
.iconfont {
  /* width/height/vertical-align根据情况自行调整 */
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
  font-size: inherit;
}



生成多色字体图标的SVG文件里,包含了1个或多个path标签,每个path对应图标的一部分,可以给path指定fill属性(填充色),表现为该颜色填充整个path。一旦制订了fill属性,即使在标签设置了color,也不会改变path这部分的颜色。

如果想用标签的color定义某部分的颜色,可以修改原SVG文件,把对应path的fill属性去掉或者设置fill="#000000";或者修改引入的js文件,找到对应的path,去掉fill属性。

  1. 以Iconfont为例引入字体图标

    以Iconfont(https://www.iconfont.cn/home/index)为例,先在【图标管理 -> 我的项目】中新建一个项目,然后把需要的图标【添加入库】,入库后即可在【购物车】中把图标添加至项目中;或者在【我的项目】中上传本地的图标文件。

    把需要的图标添加到【我的项目】后,可以【下载至本地】将图标下载后使用,Font class方式引用iconfont.css,Symbol方式引用iconfont.js,Unicode方式引用其他文件,或者选择【暂无代码,点此生成】生成cdn链接代码后直接引用。

你可能感兴趣的:(项目引入图标的一些方式)