养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

如何在项目中正确地使用字体图标

时间:2024-10-25 10:33:00

在日常IT前端开发中,我们或多或少会因为需求而在页面上添加一些美丽的小图标,但往往豹肉钕舞设计或者组件库又不能满足我们的需求,那么下面我将为大家详细讲解字体图标在实际项目中的使用,如有不当,请多多包涵!

工具/原料

台式电脑台式电脑

WindowsWindows7旗舰版

方法/步骤

1、进入图标库官网

如何在项目中正确地使用字体图标

2、搜索想要的图标加入购物车

如何在项目中正确地使用字体图标

3、进入购物车点击下载代码

如何在项目中正确地使用字体图标

4、解压后,选择下图四个文件复制,带demo的是示例文件,告诉我们如何使用,分别是三种方式的使用方式

如何在项目中正确地使用字体图标

如何在项目中正确地使用字体图标

5、在项目的assets目录下新建了个fonts目录来放这四个文件,打开iconfon隋茚粟胫t.css,为方便效果我把图标大小font-size改为160px(这项目我已经做了适配)

如何在项目中正确地使用字体图标

6、然后在main.js中导入此css文件

如何在项目中正确地使用字体图标

7、页面中使用

如何在项目中正确地使用字体图标

8、最后界面显示出来的效果如下图(这就是unicode图标的使用)

如何在项目中正确地使用字体图标

© 一点知识