iconfont矢量图标库的用法

iconfont矢量图标库的用法


在日常开发的时候,我们都必不可少的需要使用各式各样的图标来进行页面的渲染,最近学习到了关于iconfont的使用方法,以此博客来记录。

1、创建一个iconfont项目
首先我们需要进入iconfont官网
登陆进去后点击
图片管理 -> 我的项目
然后我们点击
在这里插入图片描述
填写相应的信息即可创建一个iconfont项目,并进行管理

2、添加icon到项目中
到商城中添加我们需要的icon到购物车
在这里插入图片描述
然后依次点击购物车 -> 添加至项目 -> 项目 -> 确认
即可将购物车所以的icon添加到项目中

3、在代码中使用项目中的icon
(1) 首先需要将项目中的icon下载到本地,点击我们需要下载的项目,然后点击下载至本地即可
在这里插入图片描述
下载后解压,然后将css、eot、svg、ttf、woff后缀的文件拉到我们的代码目录中
在这里插入图片描述
(2) 将文件移入我们的代码目录中(放的地方可以自己定义,但建议放在assets内),我这里是将除css文件外的其他文件放在了一个文件夹中,
在这里插入图片描述
(3) 修改路径
想要正常使用,还需要对iconfont.css文件进行路径修改,我们需要对这些文件的路径进行修改,修改成我们现在放置这些文件的路径即可
在这里插入图片描述
修改后,注意,我这里是按我的目录来修改的
在这里插入图片描述
此外,下图的base64不需要修改在这里插入图片描述
(4) 在代码中使用
在全局引入iconfont.css文件后
我们需要新建一个类名为iconfont的标签,然后将icon的代码防止到标签内即可
在这里插入图片描述
icon代码我们可以在iconfont官网中复制即可
在这里插入图片描述
如果需要修改icon的样式,可以加新的类来修改
在这里插入图片描述
修改按css的字体样式来修改即可,比如
修改icon大小:修改font-size即可
修改icon颜色:修改color即可

后面如果有新的内容会持续发新博客,如有错误,多谢指正

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值