在線網(wǎng)址：www.iconfont.com
Iconfont是什么？
阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。設計師將圖標上傳到Iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標轉換為字體，便于前端工程師自由調整與調用。
操作步驟
輸入網(wǎng)址，進入頁面
輸入關鍵字，enter進入搜索
將鼠標浮動到圖片上面，會出現(xiàn)購物車、收藏和下載三個選項
下載選項
1.調節(jié)顏色
2.調節(jié)大小
大小和顏色可以根據(jù)系統(tǒng)設定的值進行選擇，也可以輸入規(guī)范的顏色值即可。
3.SVG下載
保存文件到本地，用文本編輯器打開文件，查看源代碼
這樣就可以看到圖片的用SVG格式定義的代碼，所以說該工具也是學習SVG技術的利器。
4.AI下載
也是以文件的形式進行下載，下載的文件可以通過Adobe Illustrator進行編輯。
5.PNG下載
經(jīng)PNG下載得到的png格式的圖片，可以當做正常的圖片來顯示，不過在網(wǎng)頁中使用時，會根據(jù)網(wǎng)頁的大小而產(chǎn)生的像素損失。
收藏選項
對于喜歡的圖標進行收藏，在圖標管理-》我的收藏當中查看收藏的圖標，方便下一次的下載
購物車選項
點擊加入購物車，點擊購物車，可以看到
下載素材選項，將回到之前的下載選擇當中，不作介紹
下載代碼選項，將以壓縮文件的形式將項目打包在文件中，下載到本地
使用下載本地的代碼
將對應的文件copy到對應的文件目錄當中，如下圖所示
1.fontclass使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IconFont圖標-fontclass使用</title>
<link rel="stylesheet" type="text/css" href="styles/iconfont.css">
</head>
<body>
<i class="iconfont icon-aixin"></i>
</body>
</html>
1.兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器
2.相比于unicode語意明確，書寫更直觀?？梢院苋菀追直孢@個icon是什么
3.因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用
4.不過因為本質上還是使用的字體，所以多色圖標還是不支持的
2.symbol使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IconFont圖標-symbol使用</title>
<script type="text/javascript" src="scripts/iconfont.js"></script>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aixin"></use>
</svg>
</body>
</html>
1.支持多色圖標了，不再受單色限制
2.通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式
3.兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器
4.瀏覽器渲染svg的性能一般，還不如png
3.unicode使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IconFont圖標-unicode使用</title>
<style type="text/css">
@font-face {
font-family: 'iconfont';
src: url('fonts/iconfont.eot');
src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('fonts/iconfont.woff') format('woff'),
url('fonts/iconfont.ttf') format('truetype'),
url('fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
1.unicode是字體在網(wǎng)頁端最原始的應用方式,兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器。
2.支持按字體的方式去動態(tài)調整圖標大小，顏色等等。
3.但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
4.新版iconfont支持多色圖標，這些多色圖標在unicode模式下將不能使用，如果有需求建議使用symbol的引用方式
