html div 删除图标,CSS深入浅出-icon的各种用法

本博客主要讲CSS使用icon的各种用法和ps的基本抠图操作，下面是内容列表：

photoshop 切图

img法

background(背景图)法

background合一(雪碧图/css妖精(sprites)图)法

font法

SVG法【推荐！！！】

"CSS 就是干"法(慎用)

photoshop切图

psd如何使用

打开psd文件

右下角点小眼睛可以选择关闭/打开图层显示

如何选中图层：在图层图表上直接右键，选第一个，会选中该图层

如何单独导出图层：选中图层，右键选中"Duplicate Layer(复制图层)"，导出图层

选择新建一个文档，在这个新文档里只有你之前选中的图层

选中导航栏中的"image(图片)">"Trim(裁剪)"，OK就切完了

如何改画布大小：选中导航栏中的"image(图片)">"Canvas Size(画布大小)">改成想要的像素

如何保存：选中导航栏中的"File(文件)">导出为PNG格式(或其他)>选择地址

png(或其他格式)图片如何使用

先用套绳粗套一下你需要编辑的区域，剪切编辑

使用魔棒工具，选中图案，接着右击>反选

，删除

接下来流程参考上篇教程第5部开始

如果这样你都抠不出图

你就直接喷设计师，因为抠图现在已经不是前端负责的范畴了！！

法

好处：

每一个icon都是一张图片

举例:

特点：

默认图片大小比例是1:1，所以写宽高时只要写一项就行，不要同时写宽和高。

background(背景图)法

一般来说是没有好处的，尤其是在做icon的时候，但当你的图满足一定条件时(当你的图和div不一样大的时候)。

好处：

1.背景图不会因为你div乱动而变形

2.它可以用来做"雪碧图"【"妖精图(css sprites image)"】

举例：

div{

display:inline-block;

width: xx px;[宽xx像素]

height: xx px;[高xx像素]

background: red[背景颜色] url(./qq.png)[图片路径]

no-repeat[不要重复] 0 0[以左上角开始对齐];

}

特点：

1.用div做icon首先要让它变成一个"display:inline-block"

2.因为div默认宽高为0，所以要写个宽高才能看见

background合一法[雪碧图/css妖精(sprites)图]法

原理：

所有的div都是拥有一整个背景图的，只不过每部分只露出其中一部分

使用：

使用网页生成器

1.搜索关键词"css sprites generator"，点击第一个结果

2.上传文件>选择生成格式>填写生成前缀>填写间距多少像素...

3.生成，右键把文件保存下来

4.拷贝CSS代码，黏贴就行

5.把png的名字改一下，把样式里的名字写在对应的div上

使用命令行工具

搜索"css sprites cli"，按照教程走

手写

太麻烦，不说了

font法

前端这个行业总有人想出奇奇怪怪的方法去实现一个操作

font(字体)法，不同的字体A长得都千奇百怪，所以有些设计师把字体改成图标，比如把"a"变成苹果，把"b"变成微博

iconfont-HTML形式(使用html转义)

原理：

html转义(html实体)，搜索"html entity"可了解。

转义符是有前缀的，""就是一个前缀。

"æ"中"e6"开头的不表示任何字符，也就是就算字体没加载，也只会显示空方格，不会乱码

使用方法：

选择图标>加入购物车>加入项目

点击"Unicode"，查看在线链接(代码)，把它复制到html页面中的样式

在需要用的地方把字体改成"font-family:'iconfont' "就能用了

iconfont-CSS形式(使用伪类)

原理：

和html转义类似，在CSS里写时，将""前缀改成"\"，同时把结尾的分号删掉

利用了伪类，直接在CSS里写

使用方法：

选择图标>加入购物车>加入项目

点击"Font class"，查看在线链接(代码)

用标签引用到页面中(不支持file协议)

每个使用图标的div都要加上"icon-font"，原因可查看你复制的代码了解

每次添加或者重命名图标，都要更新一下代码

ps:改图标大小时，选择器要精确到".iconfont"，否则无法改，原因可查看你复制的代码了解

SVG法(推荐)

原理：

它是直接告诉浏览器如何画一个图案，而没有存储文件的

优点：

支持CSS

不会变形，宽高要一起写

看不见锯齿，因为SVG是矢量图

可以使用彩色图标

...

使用方法

选择图标>加入购物车>加入项目

点击"Symbol"，查看在线链接(代码)

复制代码到html的

加入通用CSS代码：

.icon {

width: 1em; height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

挑选相应图标并获取类名，应用于页面

"CSS 就是干"法 (慎用)

直接用css画出icon，难度极高

可搜索"css icon"，并点击第一个网页，模仿学习