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码。









效果图如下：

本地使用

有时候网络不是那么给力的，或者是内网环境，那么就不要考虑用在线引用的方式了。

1. 本地使用需要先将字体库下载并放到项目中。

2. 在全局样式文件中定义如下代码

@font-face {

font-family: “iconfont”;

src: url(‘…/fonts/iconfont.eot’); /* IE9*/

src: url(‘…/fonts/iconfont.eot#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */

url(‘…/fonts/iconfont.woff’) format(‘woff’), /* chrome, firefox */

url(‘…/fonts/iconfont.woff2’) format(‘woff2’), /* chrome, firefox */

url(‘…/fonts/iconfont.ttf’) format(‘truetype’), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url(‘…/assets/fonts/iconfont.svg#iconfont’) format(‘svg’); /* iOS 4.1- */

}

.iconfont {

font-family: “iconfont” !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

3. 使用方式

与在线引用方式是一样的，都是使用unicode码去展示图标。



总结

• 兼容性最好，支持ie6+，及所有现代浏览器。

• 支持按字体的方式去动态调整图标大小，颜色等等。

• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

Font class方式（较友好）

一种更友好的封装，类似于font-awesome，我们只要使用class，就可以调用图标了。其原理就是利用before伪元素来显示图标。

在线使用

超级简单，只要在线生成代码，引用在线的css文件即可使用。

在index.html中引用它。

项目中就可以使用字体图标了。

本地使用

与unicode方式类似，下载代码到本地。因为我是用scss管理样式的，需要在下载的代码中提取出关键部分。除了引用字体库，还要将其中的iconfont.css中定义的before伪元素全部复制到自己的scss文件中。

@font-face {

font-family: “iconfont”;

src: url(‘…/fonts/iconfont.eot’); /* IE9*/

src: url(‘…/fonts/iconfont.eot#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */

url(‘…/fonts/iconfont.woff’) format(‘woff’), /* chrome, firefox */

url(‘…/fonts/iconfont.woff2’) format(‘woff2’), /* chrome, firefox */

url(‘…/fonts/iconfont.ttf’) format(‘truetype’), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url(‘…/assets/fonts/iconfont.svg#iconfont’) format(‘svg’); /* iOS 4.1- */

}

.iconfont {

font-family: “iconfont” !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

// 列了一部分举例

.cl-icon-user:before {

content: “\e64b”;

}

.cl-icon-video:before {

content: “\e66b”;

}

.cl-icon-pause:before {

content: “\e7bd”;

}

.cl-icon-orgnazation:before {

content: “\e61b”;

}
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

后记

---

总结一下这三次面试下来我的经验是：

1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】免费获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容

很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】免费获取。祝大家早日拿到自己心怡的工作！**

篇幅有限，仅展示部分内容