iconfont的使用,阿里矢量图库的引用,配置,改变图标大小和图标颜色

css 专栏收录该内容
6 篇文章 0 订阅

怎么使用iconfont

  • 首先找到自己想要的图标,添加到购物车


  • 如果你只要一个图标的话,或者确保之后这个项目不需要其他的图标的话,可以直接选择下载代码,但是你有多个图标的话,最好选择添加至项目

  • 无论是添加项目还是直接下载代码,下载之后会有一个download.zip包,解压之后的文件如下图,前面四个文件就是官网的demo没有用的,后面五个才是有用的


现在请把iconfont.css放在你常用的css文件目录下,iconfont.eot/svg/ttf/woff 这四个文件可以放在fonts文件下面(文件位置不重要)。但是注意css里面有引入这四个文件的地方,所以文件路径请注意。

  • 如果你只是想使用标签引入小图标的话<i class='iconfont  icon-xxx'></i>就行了,如果class里面少了iconfont,就会出现繁体字,所以一定要记住加iconfont
  • 如果要使用svg引入的话,那么就一定要引入iconfont.js文件了,这样子就可以任意的改变图标的样式了,比如颜色。大小,本来我贪方便直接用标签,但是想改变颜色一直不知道怎么办。。。。,

接下来说如何改变大小?
  • 直接在.icon里面添加一个样式font-size就行了
改变svg的颜色?
  • svg是通过path里面的fill来改变颜色的,如果这个图标本身是没有颜色的,那么在.icon这个类里面把fill:red,就行了,但是如果这个图标原本就是有颜色的,那么这么改就起不到作用了,就要改iconfont.js里面的path,它是一个个对应下来的,只要改了fill里面的颜色,那么图标的颜色就对应的改了
评论 7 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

cjq4218

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值