「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 的优点：

使用方法：

如：

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