之前遇到一个用iconfont的demo,这是第一次遇到iconfont,使用审查元素可以看到这是一种用字符表示图片的方法,而且放大或者缩小的时候不会失真,即具有矢量性,兼容性很好。于是上网查了一下这个东西,发现现在大多数网站都会使用iconfont,下面就分享一下图标字体的使用:
1、先下载字体
- icomoon.io 进入后点击IcoMoon.APP,选择自己想要的图标,然后点击下载解压后,点击进入font
- 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放在同一目录下才显示出来了,不知道还有没有其他方法,仅供参考
很幸运的纠结了一下午呵呵