本博客主要讲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部开始
-
如果这样你都抠不出图
你就直接喷设计师，因为抠图现在已经不是前端负责的范畴了！！
<img>法
好处：
每一个icon都是一张图片
举例:
<img src="图片地址" alt="图片未显示时名称">
特点：
默认图片大小比例是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"可了解。 - 转义符是有前缀的，"
&#x"就是一个前缀。 - "
æ"中"e6"开头的不表示任何字符，也就是就算字体没加载，也只会显示空方格，不会乱码
使用方法：
- 登陆iconfont.cn
- 选择图标>加入购物车>加入项目
- 点击"
Unicode"，查看在线链接(代码)，把它复制到html页面中的样式<style>中 - 在需要用的地方把字体改成"
font-family:'iconfont'"就能用了
iconfont-CSS形式(使用伪类)
原理：
- 和html转义类似，在CSS里写时，将"
&#x"前缀改成"\"，同时把结尾的分号删掉 - 利用了伪类，直接在CSS里写
使用方法：
- 登陆iconfont.cn
- 选择图标>加入购物车>加入项目
- 点击"
Font class"，查看在线链接(代码) - 用<link>标签引用到页面中(不支持file协议)
- 每个使用图标的div都要加上"
icon-font"，原因可查看你复制的代码了解 - 每次添加或者重命名图标，都要更新一下代码
ps:改图标大小时，选择器要精确到".iconfont"，否则无法改，原因可查看你复制的代码了解
SVG法（推荐）
原理：
它是直接告诉浏览器如何画一个图案，而没有存储文件的
优点：
- 支持CSS
- 不会变形，宽高要一起写
- 看不见锯齿，因为SVG是矢量图
- 可以使用彩色图标
- ...
使用方法
- 登陆iconfont.cn
- 选择图标>加入购物车>加入项目
- 点击"
Symbol"，查看在线链接(代码) - 复制代码到html的
<script>中 - 加入通用CSS代码：
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 挑选相应图标并获取类名，应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#图标名"></use>
</svg>
"CSS 就是干"法 (慎用)
直接用css画出icon，难度极高
可搜索"css icon"，并点击第一个网页，模仿学习
网友评论