2018-03-23 icon的全解
2018-04-01 本文已影响0人
tsl1127
1、用photoshop切割设计稿，然后写html
然后加css，实现设计稿
image.png
2、
image.png
image.png
image.png
3、接下来是雪碧图
css sprites（这种技术来自于一个游戏）
搜css sprites generator
image.png
image.png
image.png
image.png
其实背景图片都在，只不过让其想显示的显示出来，
image.png
所有的div其实都有了整个背景图的，只不过能只漏出其中的一小块
也可以用命令行工具
image.png
http://glue.readthedocs.io/en/latest/
image.png
image.png
4、font法
http://iconfont.cn/
http://www.bangnishouji.com/tools/chtounicode.html
image.png
image.png
image.png
image.png
image.png
以上是在html里用
还有一种方法是使用伪类
image.png
用css来写content，不用&#x，而是用\ ，缺点是ie6不支持
换一种方法，不用写上面的代码
image.png
image.png
每个div需要2个class
image.png
记住，这些图片都是字体
5、SVG icon
.svg是代码
image.png
image.png
image.png
image.png
6、纯画CSS
https://cssicon.space/#/
image.png
