前端字体图标的使用（阿里、icomoon），前端开发基础教程视频

阿里字体图标使用

---

• 首先去阿里图标库官网：www.iconfont.cn/

• 搜索需要的图标库 ——>加入购物车——>点击购物车——>添加到项目（如果有项目直接加入需要的项目，没有则新建项目）

• 在”图标管理” 中可以查看我的项目

• 1、Unicode方式 在项目中进行使用

字体图标使用 /* 第一步： 在样式里面申明字体 * */ @font-face { font-family: 'iconfont'; /* project id 551814 */ src: url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot'); src: url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.woff') format('woff'), url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.ttf') format('truetype'), url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.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; }



• 2、Font class方式 在项目中进行使用

引入样式表

使用

这样就可以看到效果了！

注意：Unicode方式，当每次在图标库内加入新的标签时，需要重新copy 项目生成的在线链接@font-face，否则新的图标将会无效； Font class 在使用的时候要添加icon iconfont两个属性

---

icomoon字体图标使用

---

• 首先去icomoon图标库官网：icomoon.io/app/#/selec…

• 选择你需要的图标，同时页面会有其他的一些功能，自己可以摸索

选择完成后，会有selection（个数），同时点击 右边的Generate Font按钮进行下载

点击Download下载

• 把压缩包里面的fonts拷贝到你的项目

• 使用icomoon字体图标， 打开压缩包的demo.html，选择你需要的图标

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：docs.qq.com/doc/DSmRnRG…