HTML中的iconfont使用

之前遇到一个用iconfont的demo，这是第一次遇到iconfont，使用审查元素可以看到这是一种用字符表示图片的方法，而且放大或者缩小的时候不会失真，即具有矢量性，兼容性很好。于是上网查了一下这个东西，发现现在大多数网站都会使用iconfont，下面就分享一下图标字体的使用：

1、先下载字体

1. icomoon.io 进入后点击IcoMoon.APP，选择自己想要的图标，然后点击下载解压后，点击进入font
2. http://iconfont.cn/ 阿里妈妈字体库

2、声明字体

@font-face {font-family: "iconfont";

  src: url('../fonts/iconmoon.eot'); /* IE9*/

  src: url('../fonts/iconmoon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('../fonts/iconmoon.woff') format('woff'), /* chrome, firefox */

  url('../fonts/iconmoon.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

  url('../fonts/iconmoon.svg#uxiconfont') format('svg'); /* iOS 4.1- */

}

注意路径修改

3、使用字体

[class^="icon-"], [class*=" 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-film:before {

  content: "\e913";

}

然后按普通class调用就行了

注意：由于路径问题可能会显示不出来，试了好多最后也没解决，只能把css、html放在同一目录下才显示出来了，不知道还有没有其他方法，仅供参考

很幸运的纠结了一下午呵呵