我以前遇到过使用iconfont的demo。 这是我第一次遇到iconfont。 使用检阅元素,可以看到这是用文字表示图像的方法。 另外,即使放大或缩小也不会变形,也就是说具有矢量性,兼容性高。 于是我在网上调查了一下这件事,发现现在几乎所有的网站都在使用iconfont。 共享关于图标字体的使用:
1、先下载字体
http://www.Sina.com/http://www.Sina.com /
icomoon.io 进入后点击IcoMoon.APP,选择自己想要的图标,然后点击下载解压后,点击进入font
@ font-face { font-family : ‘ icon font ‘; src : URL ‘ ./fonts/icon moon.eot ‘ );/* ie9 */src : URL ‘ ./fonts/icon moon.eot? # ie fix ‘ 格式嵌入式开放)、/*ie6-Ie8*/URL ) ./fonts/iconmoon.woff ) 格式) woff ) ) Firefox */URL ./fonts/icon moon.TTF ) )格式)、truetype )、/* chrome、Firefox、opera、Safari、Android、
http://iconfont.cn/ 阿里妈妈字体库
2、声明字体
注意路径修改
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 {
然后用普通的class调用就可以了
http://www.Sina.com/http://www.Sina.com /