圖片有諸多優(yōu)點(diǎn)，缺點(diǎn)也很明顯拙毫，比如圖片增加了總文件的大小，還增加了額外的http請求棺禾，降低網(wǎng)頁性能缀蹄。并且圖片縮放會(huì)導(dǎo)致圖片失真，在很多情況下我們是希望圖標(biāo)是可以縮放的帘睦，字體圖標(biāo)（iconfont）的優(yōu)勢就顯現(xiàn)出來了。
字體圖標(biāo)優(yōu)點(diǎn)：
- 可以做出和圖片一樣的事情坦康，改變透明度竣付、旋轉(zhuǎn)等
- 本質(zhì)是字體，可以改變顏色滞欠、產(chǎn)生陰影古胆、透明效果等
- 體積更小，但攜帶的信息并沒有消減
- 幾乎支持所有瀏覽器
- 移動(dòng)端設(shè)備必備良藥
推薦網(wǎng)站：
https://icomoon.io
IcoMoon成立于2011年筛璧，推出第一個(gè)自定義圖標(biāo)字體生成器逸绎，允許用戶選擇他們所需要的圖標(biāo)，使他們成為一字型夭谤。
http://www.iconfont.cn/
這是阿里媽媽M2UX的一個(gè) icon font 字體圖標(biāo)字庫棺牧，包含了淘寶圖標(biāo)庫和阿里媽媽圖標(biāo)庫。
http://fontello.com/
在線定制自己的icon font字體圖標(biāo)字庫朗儒，也可以直接從GitHub下載整個(gè)圖標(biāo)集颊乘，項(xiàng)目開源。
字體如何引入HTML中：
<style>
@font-face {
font-family: "icomoon"; /*YourWebFontName*/
src: url('fonts/icomoon.eot?7kkyc2'); /* IE9 Compat Modes */
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/icomoon.ttf?7kkyc2') format('truetype'), /* Safari, Android, iOS */
url('fonts/icomoon.woff?7kkyc2') format('woff'), /* Modern Browsers */
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); /* Legacy iOS */
font-style: normal; /*傾斜字體正常*/
}
</style>
需要哪一張圖片醉锄，就按照圖中所示選中copy到HTML中即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@font-face {
font-family: "icomoon"; /*YourWebFontName*/
src: url('fonts/icomoon.eot?7kkyc2'); /* IE9 Compat Modes */
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/icomoon.ttf?7kkyc2') format('truetype'), /* Safari, Android, iOS */
url('fonts/icomoon.woff?7kkyc2') format('woff'), /* Modern Browsers */
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); /* Legacy iOS */
font-style: normal; /*傾斜字體正常*/
}
.location {
font-family: 'icomoon';
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<div class="location">?</div>
</body>
</html>
自設(shè)計(jì)圖標(biāo)
如果圖標(biāo)庫里沒有乏悄，需要UI設(shè)計(jì)，保存為svg格式恳不，交給前端人員檩小，轉(zhuǎn)化為頁面能使用的字體，而且是需要生成的是兼容性適合各個(gè)瀏覽器的烟勋。
導(dǎo)入svg資源
追加圖標(biāo)
工作中规求，原有的字體圖標(biāo)不夠用，原先的不能刪除卵惦，如何追加颓哮。
把selection.json重新上傳，然后再選擇新添加的即可
