「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 的優點：

使用方法：

如：

確定是最後一種又方便又快捷的方式最好啦~