欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端如何在项目中使用iconfont 引入iconfont 图标库

程序员文章站 2024-02-16 17:27:52
...

iconfont网址https://www.iconfont.cn/
怎么注册GitHub,怎吗登录我就不说了;
先看样式
前端如何在项目中使用iconfont 引入iconfont 图标库
1.第一步:搜索框搜索输入你需要的图标名称,查看样式
前端如何在项目中使用iconfont 引入iconfont 图标库
第二步:鼠标悬浮在你需要的图标上 会出现三个图标 点击购物车
前端如何在项目中使用iconfont 引入iconfont 图标库
第三步: 以此类推 选择完你需要的所有图标后,找到右上角的它
前端如何在项目中使用iconfont 引入iconfont 图标库
第四步:点击右上角的购物车,然后下载代码
前端如何在项目中使用iconfont 引入iconfont 图标库
第五步:解压压缩包,复制iconfont.css文件到你的项目
前端如何在项目中使用iconfont 引入iconfont 图标库
前端如何在项目中使用iconfont 引入iconfont 图标库
第六步:引用css文件,路径一定要正确,这个我就出错了,找了好久才发现
前端如何在项目中使用iconfont 引入iconfont 图标库
然后你就可以显示了
前端如何在项目中使用iconfont 引入iconfont 图标库
也可以用红色箭头这种
前端如何在项目中使用iconfont 引入iconfont 图标库
红蓝的箭头双样式的展示:
前端如何在项目中使用iconfont 引入iconfont 图标库

<i class="iconfont">&#xe501;</i>
 <span class="iconfont icon-tuichu1"></span>

对应iconfont.css文件中的
前端如何在项目中使用iconfont 引入iconfont 图标库
如果记不住怎么引用具体的图表,可以打开压缩包中的demo_index.html
前端如何在项目中使用iconfont 引入iconfont 图标库
前端如何在项目中使用iconfont 引入iconfont 图标库
前端如何在项目中使用iconfont 引入iconfont 图标库
js引用 ,我没有试,两种够用
记住一定改正好路径