vue项目中引入iconfont，初学者必看

注：这里修正一下，前缀应该是test-icon-。

2. 添加图标至项目

---

3. 使用iconfont

---

Unicode方式（不推荐）

在线使用

• index.scss中引入在线字体

@font-face {

font-family: ‘iconfont’; /* project id 1254715 */

src: url(‘//at.alicdn.com/t/font_1254715_s1khj1whikd.eot’);

src: url(‘//at.alicdn.com/t/font_1254715_s1khj1whikd.eot?#iefix’) format(‘embedded-opentype’),

url(‘//at.alicdn.com/t/font_1254715_s1khj1whikd.woff2’) format(‘woff2’),

url(‘//at.alicdn.com/t/font_1254715_s1khj1whikd.woff’) format(‘woff’),

url(‘//at.alicdn.com/t/font_1254715_s1khj1whikd.ttf’) format(‘truetype’),

url(‘//at.alicdn.com/t/font_1254715_s1khj1whikd.svg#iconfont’) format(‘svg’);

}

• 页面中使用

使用时很不友好，使用的是unicode码表示，使用图标还必须去iconfont项目去查询下unicode码。









效果图如下：