css自定义图标扩展

CSS文件示例

@font-face {font-family: "font";
  src: url('iconfont.eot?t=1545027595906'); /* IE9*/
  src: url('iconfont.eot?t=1545027595906#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('项目的图标库链接') format('woff'),
  url('iconfont.ttf?t=1545027595906') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1545027595906#ehlfont') format('svg'); /* iOS 4.1- */
}

.font {
  font-family:"font" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.add:before { content: "\e6a8"; }

@font-face为在线引用方式，下方的为unicode引用方式。

html使用方式

<i class="iconfont">&#xe630;</i>

1、直接引用Unicode编码，不利于分辨不利于记住。

<a href=""><i class="font add"><span>图表</span></i></a>

2、使用图标时引入图标css并使用上述代码即可。

扩展

想要扩展图标时，只需加入类似于add这样的方法，方便与程序员查找，并且不用每次查询 content 后的图标编码。

“\e6a8” unicode 字符

"\e6a8"为对应矢量图标的编码。使用引用Unicode这种方式的好处是不必再使用css spirit切图了，而且作为矢量图可以以任意你想要的尺寸显示，另外，这种方法兼容性很好（ie6 7 可以显示，前提是你为不同的浏览器准备了不同的字体文件格式，如eot、woff、ttf、svg）。

文件支撑