html加icon图标,html网页图标

我以前遇到过使用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 /

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注