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作出图标