一、css sprite方法
将多个小图标组合到一张大图片上,这就是传说中的雪碧图,然后运用background-position: X X;定位到雪碧图的不同位置,从而显示不同图标。
以下是具体步骤:
1.阿里巴巴矢量图标库下载自己需要的图标,可自行选择所需颜色、大小、保存方式,这里我保存为png图片格式。
2.可以到/这个网站把你下载的多个小图标组合到一张图上,这就是传说中的"雪碧图"。
页面下方有提示每个小图标在雪碧图上的位置信息。
雪碧图
3.准备工作做好了就可以写代码了,只做一个演示,代码非常简单。
4.浏览器中效果
二、使用图标字体在网页中画icon小图标(font+html)
就相当于你写一个字,然后给这个字添加很多的css样式,使它变成了图标的样子。优点如下:
灵活性:可轻松改变图标的颜色、大小或其它css效果
矢量性:图标是矢量的,与像素无关,缩放图标不会影响清晰度。
兼容性:字体图标支持所有现代浏览器(包括糟糕的IE6)
本地使用:通过添加定制字体到你的本地系统,你可以在各种不同的设计和编辑应用程序中使用它们。
图标字体(Icon Fonts)的引入方式有两种:link方法和@font-face 方法。
(1) link方法引入图标字体样式
1.从阿里巴巴矢量图标库的购物车里把图标文件下载到本地,解压,得到很多文件。注意其中的两个就好了,一是demo.html,这是一个使用说明,二是iconfont.css ,这是一个样式文件, 待会儿要用到。
2.使用编辑器打开demo.html这个文件,我们只关注标签里的内容。(因为我下载了三个图标,所以我这里有三个标签)
3.直接复制这三个标签到你的代码中(不要更改标签内的内容,也不要更改它的class名,但可以添加class名以定义新的样式),并在文件头部加link标签,将样式文件iconfont.css引入进来,注意路径 。
代码如下,非常简单:
4.浏览器中效果
5.添加class名,自己定义新的样式。比如我给中间的企鹅添加class名为“changeColor”,并定义样式
.changeColor{
font-size: 50px;
color:pink;
}
于是它变成了这样:
(2)@font-face 方法引入
@font-face 方法原理和link方法一样,只是引入方式不同,还是以那些资源来讲。
1.用编辑器打开iconfont.css这个文件,复制如图红色框中的所有内容。(因为不同浏览器对不同字体的支持度不同,所以我们需要把eot,woff,ttf,svg这四种字体都引入)
2.复制到你的标签中即可。
3.打开浏览器就可以看到效果了
4.同样可以修改样式
三、使用图标字体在网页中画icon小图标(font+css)
主要运用伪标签:before{content:""}来实现,这里我们来画一个心形图标,具体步骤如下:
1.下载字体文件,用编辑器打开iconfont.css文件,可以看到下图这样一句代码。其中e64a是这个图标的16进制html实体。
2..icon-heart::before{ }在“你”字前面添加图标图标实体,link引入css样式文件从而设置这个图标实体的样式。
`1M_3BOHS7(P)82)1(CUW_1.png
3.浏览器显示效果
四、总结
css sprite方法兼容性完美,但是缩放会导致图标失真,后期维护困难
font+HTML方法兼容性完美,缩放不失真,后期维护简单
font+css不支持IE低版本,缩放不失真,后期维护简单
知识点补充:
1. 图标网站有很多,如:icomoon,fontello,阿里巴巴矢量图标库等,选择自己喜欢的就好。
2.浏览器对字体支持情况
© 本文归饥人谷和本人所有,如需转载请注明来源。