「CSS Warning 2」icon 的做法

icon 的做法

在前端开发过程中，项目中使用 icon 是非常常见的。如何使 icon 正常地呈现在页面上是一个前端的职责之一。

接下来就整理下有关于 icon 的整理做法，参考了方老师的 「CSS深入浅出」课程。

---

场景：假设有一个 PSD 文件，里面包含了各种图标:

如果要把这些图片放到我们的项目中，应该怎么做呢？

• 使用 img 制作 icon 推荐指数 ★★☆☆☆

选中图标 -> 右键选中图层 -> 复制图层到新文档 -> 裁剪图片(根据可见像素) -> 根据需要调整画板尺寸 -> 切图完成 -> 导出 PNG -> 使用 img 标签插入到页面中 -> Done

<img src='./xx.png'>

• 使用 background 推荐指数 ★★☆☆☆

通过 background url属性设置 icon

<style>
    .icon{
        width:100px;
        height:100px;
        background:url(./xx.png)
    }
</style>
<div class='icon'><div>

• CSS Sprites 推荐指数 ★★☆☆☆

使用 CSS Sprites 制作 icon，他把多张图片(icon)合成一张图片，然后通过 background-position 和 overflow:hidden 显示这张图片的某个位置，来达到相当于「截取局部图片」的功能。

---

除此之外，还可以使用 iconfont：

iconfont

官方帮助文档

• 把图标写入 HTML 中：推荐指数 ★★★☆☆

选择需要的icon -> 加入项目中 -> 生成代码

把代码复制到个人项目中：

• 可以把图标写进CSS(伪类)中：推荐指数 ★★★☆☆

• 当然，更方便的，还有以下这种方式：推荐指数 ★★★★☆

• SVG icon 推荐指数 ★★★★★

使用 svg 制作 icon 的优势：

使用方法：

如：

肯定是最后一种又方便又快捷的方式最好啦~