使用步骤:
进入 https://www.iconfont.cn 登录,找到自己想要的图标,添加到购物车,支持多个,支持调好大小、颜色。
如果你只要一个图标的话,或者确保之后这个项目不需要其他的图标的话,可以直接选择下载代码,但是你有多个图标的话,最好选择添加至项目。
无论是添加项目还是直接下载代码,下载之后会有一个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里面的颜色,那么图标的颜色就对应的改了。