icon 的各種實現(xiàn)方式
- 需求：一個頁面上有很多個小圖標
- 實現(xiàn)方式：
- image
- CSS Sprites
- Icon Font
- CSS Icon
- SVG（目前來看价卤，是最完美的）
使用 image 實現(xiàn)
- 注意事項：
- img 的大小設置
- 可以只設置寬度／高度运准，圖片會自適應縮放
- img 的 vertical-align
- 請求數(shù)過多
- 因為每一個請求都是需要花時間去建立的，HTTP 1.1 時代，客戶端（瀏覽器）是慢的趣斤，但如果升級到了 HTTP 2讨衣，100個請求跟1個請求是差不了多少的
- 在服務器端（server），比如是用 php没炒、java 實現(xiàn)的后端涛癌，請求過多，一般會導致線程過多送火，或大或小都會產(chǎn)生一定的壓力
- 另外拳话，請求過多，對網(wǎng)站流量也會有一定的影響种吸，流量要要花錢的
- img 的大小設置
CSS Sprites（CSS 精靈圖）
- 最開始我們是 人肉拼 Sprites
- 現(xiàn)在可以使用命令行
- google：npm css sprites弃衍，可以找到 sprity。通過文檔中的 sprity-cli 來查看如何在命令行中使用它
- 安裝完成后骨稿，比如使用命令
sprity create build resource/*.png -s style.css笨鸡。這里意思是將 resource 目錄下的 png 格式圖片生成 scripts 以及 名為style.css的文件，并放在 build 目錄下坦冠。這樣我們就可以在代碼中直接引用了形耗，直接加上對應的 icon 類名即可
- 或使用在線工具：（google：css sprites generator）
- 圖片合并及生成 stylesheet：CSS Sprite Generator
- 圖片合并：CSS Sprites Generator
- 缺點：
- 無法縮放
- 不好修改
Icon Font 把字體做成圖標
- 制作字體文件
- 可以通過 iconfont 來制作
- 聲明 font-family
@font-face- 使用本地鏈接
- 或者使用第三方鏈接
- 使用 font-familt
- 使用 HTML 實體字符，寫在標簽里面（所有瀏覽器都兼容）
- 或使用 CSS
:before（IE7-不支持） —— CSS Entities
<style type="text/css">
span:before {
content: "\00A9";
}
</style>
</head>
<body>
<span>?</span>
</body>
CSS icon 用 CSS 畫
- CSS 能畫圓辙浑，能畫方激涤，為什么不能畫 icon？
- 參考網(wǎng)站：CSS ICON
- 兼容性：IE支持不太好，比如
border-radiusIE8-不支持
SVG
- svg 可以作為圖像的地址直接傳入：
<\img src="svg">倦踢，但是這樣依然會造成請求數(shù)過多 - 還可以使用 SVG "sprites"
- google：npm svg sprites送滞，看排名靠前的，比如 svg-sprite
- 它是以標簽的形式來組織所有的圖片的辱挥，移動端首選
- 優(yōu)點：可以方便的修改 icon 的大小犁嗅、顏色，縮放沒有鋸齒
