Vue 2.0已經成為了現代前端開發的代表技術之一，其一大特色就是組件化開發。而在實際開發中，iconfont也是常常被使用的重要資源之一。在Vue 2.0中，使用iconfont也非常簡單。

<template>
<i class="iconfont icon-MyIcon" aria-hidden="true"></i>
</template>
<script>
export default {
// ...
}
</script>
<style>
@font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/font_xxxx.woff2?t=yyyy') format('woff2'),
url('//at.alicdn.com/t/font_xxxx.woff?t=yyyy') format('woff');
}
[class^="icon-"], [class*=" icon-"] {
/* 單獨設置每個圖標的樣式，推薦使用 LESS / SCSS 等預編譯語言 */
font-family:"iconfont" !important;
font-size:14px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>

上面的代碼就是一個最基本的使用iconfont的例子。在vue組件中，只需要給i標簽添加對應的圖標樣式名即可快速使用圖標。

為了能夠獲取到對應的圖標字體文件，還需要在樣式中進行font-face的設置。在此需要注意的是，字體文件的第一地址通常使用https請求，以保證安全性。

在樣式中，還需要單獨設置每個圖標的樣式。而 CSS 預處理器可以大大簡化這個過程。推薦使用LESS/SCSS等預編譯語言。