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

 时间:2024-10-14 04:38:44

1、进入图标库官网

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

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

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

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

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

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

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

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

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

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

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

7、页面中使用

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

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

如何在项目中正确地使用字体图标
  • 倍速阅读怎么使用兑换码
  • 爱番番怎么查看新线索消息
  • 荷叶的功效和作用
  • 黑色短裙的分类与搭配
  • 装扮少女第46关新年穿搭怎么过?
  • 热门搜索
    三元催化器怎么清洗 汽车牌照怎么安装 艾滋病是怎么来的 同学录怎么写 咽喉有异物感是怎么回事 岗位职责怎么写 皮皮虾怎么做好吃 鲜香菇怎么做好吃 弯钩怎么写 苹果笔记本怎么样