CSS4:icon全解

CSS4:icon全解

1.img法

1.1如何在psd文件里扣出图层里的图标

1. 右键选中这个图层
   
2. 右击这个图层,把这个图层放到新文件
   
   
3. 点击图片的trim按钮,自动切图到最小
   
   
   再调整一下画布大小,将图片设置为长宽一样
   导出PNG即可

在页面里,PNG图片会默认保持比例,所以只要设置宽高的其中一种就可以了

抠图的前端现在基本没有了.属于落后的技术

1.2 如果设计师给的是PNG(设计师不专业)

用PS扣.具体步骤是选中按钮,crop,得到新图片,魔棒工具选中按钮,反选,删除背景,trim后,调整大小

1.3第一种引入图标方法代码

直接使用img标签

2.background-icon 法

2.1第二种引入图标方法代码

将图标当做div[display,inline-block]的背景图.
好处是图片大小固定,不随div宽高改变而改变

2.2 精灵图(雪碧图) sprites

直接搜 CSS sprites Generator,直接生成
不要自己手动做,麻烦
css.spritegen.com

1. 上传PNG文件,自动生成一个整的文件
   
2. 图片另存为,然后复制代码
   
3. 粘贴代码,做修改
   
   

雪碧图方法老套,现在很少用了.

3.iconfont-HTML形式

使用iconfont.cn网站
大概原理:把字体变成图标,用什么字体中的字母就有什么图标

3.1iconfont.cn使用方法:

iconfont.cn

1. 很多图标添加至购物车
   
2. 把这些图标组成一种新字体.
   
   

   知识点:html字符实体
   
   如果实体编号大于某个数值了,就以x开头,x表示为16进制.比如'你'的编码
   
   也就是说所有的符号,大于小于,空格,文字,都可以用实体编码表示,浏览器会解析
   
   所以
   

3. 使用字体
   
   使用方法:
   

4. iconfont-CSS形式

可以使用伪类CSS来添加图标

4.1第二种用css简便方法

当只用iconfont类的时候,告诉浏览器我这个容器要是用iconfont字体.
源代码:原理

第二个class就是写里面是什么图标
然后用span

这种方法也快要被淘汰了,接下来看第三种方法

5.SVG icon(推荐使用)

目前大家优先使用这样一种方法

5.1使用sketch做一个SVG图,插卡看SVG图特性

SVG其实是一段代码
浏览器可以解析这段代码,将它变成图形
渐变,五角星位置,都是代码,根据代码,就可以生成图形

只要将代码放到浏览器,就可以出现图片

5.2使用iconfont.cn引用SVG

查看帮助文档

1,2引入js和style,3直接使用

SVG是矢量图,不会失真,默认居中

如果是没有颜色的SVG,可以用fill属性来改,如果有颜色,就不能用了.也可以给svg描边

以后做图标就是SVG的时代了,他可以渐变,可以不失真,甚至可以动
推荐在任何时候都用第三种SVG方式

6. 用 CSS 干 icon(不推荐使用)

cssicon.space
只用css做出图标