之前遇到一个用iconfont的demo，这是第一次遇到iconfont，使用审查元素可以看到这是一种用字符表示图片的方法，而且放大或者缩小的时候不会失真，即具有矢量性，兼容性很好。于是上网查了一下这个东西，发现现在大多数网站都会使用iconfont，下面就分享一下图标字体的使用：
1、先下载字体
icomoon.io 进入后点击IcoMoon.APP，选择自己想要的图标，然后点击下载解压后，点击进入fonthttp://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调用就行了
