CSS icon的各种做法
2019-09-26 本文已影响0人
_ClariS_
一、图片法（img）
这是我们常用的在页面中引用图片的方法
首先从设计师那里拿到设计稿（psd或图片），然后使用切图工具（比如PS）把你要的图扣出来（这里就不讲PS的操作了，因为我也不会@_@），最后把图片放到你的页面中即可
这里以做三个图标为例
<img src="./qq.png" alt="QQ">
<img src="./sina.png" alt="微博">
<img src="./wechat.png" alt="微信">
注意：用img标签时，为了保证图片为原始的比例，最好不要同时设置宽高（否则你的图片会很丑），宽高只设置其中一个就好。
二、背景图法（background）
把上面的 img 标签换为 div ，把图片设置为 div 的背景图
HTML
<div class="icons" style="text-align: center;">
<div class="icon qq"></div>
<div class="icon sina"></div>
<div class="icon wechat"></div>
</div>
CSS
.icons>.icon {
margin: 5px 25px;
border: 1px solid red;
display: inline-block;
width: 100px;
height: 100px;
}
.icons>.icon.qq {
background: transparent url(./qq.png) no-repeat 0 0; /* 不重复，以左上角对齐 */
}
.icons>.icon.sina {
background: transparent url(./sina.png) no-repeat 0 0;
}
.icons>.icon.wechat {
background: transparent url(./wechat.png) no-repeat 0 0;
}
效果和用 img 是一样的
这种方法的好处是好处：当改变 div 的宽高时，图片不会因 div 的大小改变而发生形变，如下图
三、background 合一法（雪碧图法）
- 如何生成雪碧图
网上随便找一个可以生成雪碧图的网站（搜索关键词css sprites generator）
例如这个网站 http://css.spritegen.com/
然后按照提示进行操作
最终得到一张合成图和一些代码
保存图片并将代码复制到你的页面中
- 雪碧图的原理
其实每个div的背景图都是一样的，如下
它只是通过background-position和overflow: hidden属性隐藏了其他的背景图，只显示我们想要看见的图，最终达到不同的div显示不同背景图的效果
四、font 法
iconfont-HTML形式（使用HTML转义）：
-
在 iconfont.cn 上找到你想要的图片并添加至项目
-
点击 Unicode 和在线链接生成代码
- 将生成的Unicode码和CSS代码复制到页面中
或者用下面这种方式
iconfont-CSS形式：
- 点击 Font class 生成 CSS 代码
- 将生成的 CSS 代码复制到页面中，并给标签添加类
class="iconfont icon-你的图标名"引用（别问我为什么这么写，自己将CSS引用链接复制到浏览器中去看源码你就知道了）
iconfont-JS形式：
也就是下面的 SVG 法
五、SVG icon法（推荐用法）
- 点击 Symbol 生成 JS 代码并复制到页面中引用
打开开发者工具，我们发现这段 JS 代码在页面中创建了一个“隐形”的 svg 标签
- 点击使用帮助，找到下方的“symbol引用”
- 复制 CSS 代码和 svg 标签到页面中
效果如下：
使用 svg 的好处：
- svg是矢量图，可以任意设置icon的宽高，调节大小
- svg的图标默认是居中的
- svg支持用CSS修改样式（颜色、渐变、动画等）
六、直接用 CSS 画icon
你可以搜索 cssicon.space 这个网站看看别人用 CSS 画的图标
这里有一个例子 用CSS画一个放大镜
用这种方式做 icon 的好处是：可以练习你的CSS功底
总结
一句话，用 svg 就完事儿了
