icon小图标制作

发布时间:2016-11-21 11:32 阅读:525

文/饥人谷 任务9班-陈加欢

本文著作权归作者所有;如需转载请联系饥人谷,并注明原文出处

———个人学习笔记

一、css sprite方法

将多个小图标组合到一张大图片上,这就是传说中的雪碧图,然后运用background-position: X X;定位到雪碧图的不同位置,从而显示不同图标。

以下是具体步骤: 1.阿里巴巴矢量图标库下载自己需要的图标,可自行选择所需颜色、大小、保存方式,这里我保存为png图片格式。

2.可以到http://csssprites.com/这个网站把你下载的多个小图标组合到一张图上,这就是传说中的"雪碧图"。 页面下方有提示每个小图标在雪碧图上的位置信息。

3.准备工作做好了就可以写代码了,只做一个演示,代码非常简单。

4.浏览器中效果

二、使用图标字体在网页中画icon小图标(font+html)

就相当于你写一个字,然后给这个字添加很多的css样式,使它变成了图标的样子。优点如下:

  • 灵活性:可轻松改变图标的颜色、大小或其它css效果
  • 矢量性:图标是矢量的,与像素无关,缩放图标不会影响清晰度。
  • 兼容性:字体图标支持所有现代浏览器(包括糟糕的IE6)
  • 本地使用:通过添加定制字体到你的本地系统,你可以在各种不同的设计和编辑应用程序中使用它们。 图标字体(Icon Fonts)的引入方式有两种:link方法和@font-face 方法。
(1) link方法引入图标字体样式

1.从阿里巴巴矢量图标库的购物车里把图标文件下载到本地,解压,得到很多文件。注意其中的两个就好了,一是demo.html,这是一个使用说明,二是iconfont.css ,这是一个样式文件, 待会儿要用到。

2.使用编辑器打开demo.html这个文件,我们只关注<i></i>标签里的内容。(因为我下载了三个图标,所以我这里有三个<i></i>标签)

3.直接复制这三个<i></i>标签到你的代码中(不要更改标签内的内容,也不要更改它的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样式文件从而设置这个图标实体的样式。

3.浏览器显示效果

四、总结

  • css sprite方法兼容性完美,但是缩放会导致图标失真,后期维护困难
  • font+HTML方法兼容性完美,缩放不失真,后期维护简单
  • font+css不支持IE低版本,缩放不失真,后期维护简单

知识点补充: 1. 图标网站有很多,如:icomoonfontello阿里巴巴矢量图标库等,选择自己喜欢的就好。 2.浏览器对字体支持情况


© 本文归饥人谷和本人所有,如需转载请注明来源。

可以输入140个字