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

时间:2024-04-05 14:16:52

怎么使用iconfont

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

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

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

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

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

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

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

  • 如果你只是想使用标签引入小图标的话<i class='iconfont  icon-xxx'></i>就行了,如果class里面少了iconfont,就会出现繁体字,所以一定要记住加iconfont
  • 如果要使用svg引入的话,那么就一定要引入iconfont.js文件了,这样子就可以任意的改变图标的样式了,比如颜色。大小,本来我贪方便直接用标签,但是想改变颜色一直不知道怎么办。。。。,
iconfont的使用,阿里矢量图库的引用,配置,改变图标大小和图标颜色
接下来说如何改变大小?
  • 直接在.icon里面添加一个样式font-size就行了
改变svg的颜色?
  • svg是通过path里面的fill来改变颜色的,如果这个图标本身是没有颜色的,那么在.icon这个类里面把fill:red,就行了,但是如果这个图标原本就是有颜色的,那么这么改就起不到作用了,就要改iconfont.js里面的path,它是一个个对应下来的,只要改了fill里面的颜色,那么图标的颜色就对应的改了
iconfont的使用,阿里矢量图库的引用,配置,改变图标大小和图标颜色