VUE项目中iconfont入门

2 篇文章 0 订阅
本文介绍了在Vue项目中如何使用iconfont,包括如何注册账号、下载图标、引入css文件,解决图标显示为小方框的问题,以及调整图标大小的技巧。通过设置专属类名和使用font-size属性可以灵活地管理和应用iconfont图标。
摘要由CSDN通过智能技术生成

VUE项目中iconfont入门

在项目中使用iconfont进行图标管理。

iconfont引用

我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

  1. 进入iconfont账号 ,进入阿里巴巴矢量图标库注册账号;
  2. 查找所需要的图标 将需要的图标加入购物车 ,去购物车将图标添加至项目,便于管理;
  3. 在购物车将图标压缩包下载到本地 后进行解压;
  4. 将解压后的文件选择所需要的放到项目文件夹中,如果解压文件内部有文件路径发生改变,注意在iconfont.css中进行路径修改
  5. 增在main.js中引用iconfont.css
  6. 在 项目中根据图标编码 引用图标。

iconfont图标显示小方框

  1. 引用图标中需要在类名中加入iconfont
  2. 可以在iconfont基础上增加一个专属类名。

替换:Ctrl/Command + G

iconfont图标无法改变大小

  1. 使用font-size修改图标大小;
  2. 注意样式覆盖问题,在这里写入script中的样式会被main.js中引用的iconfont.js中的样式所覆盖,所以这里提供两个选择:(1)删去iconfont.js中的font-size样式设置;(2)把需要的font-sise写为标签style中,即内联样式。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值