在一张页面中我们经常会看见一些小的图标,这些图标小巧、意义明确,总之非常有用,难道他们是一些小图片吗。不错有的的确是小图片,但是在这里我将介绍另外一款工具那就是我们可以把这些图标当做一个个文字来对待,因此我们可以调整它的大小和颜色。下面我来介绍一下如何使用。
iconfont有两种引入方式,一是在html的style标签中引入iconfont官网生成的自动链接,二是将选中的字体图标下载到本地,利用link标签引入外部css文件。
在线使用:
点击获取在线链接就可以,当然如果你要下载到本地使用就点击下载到本地,然后在需要的位置引入你想要的图标:
注意:这里的class的值必须要包含iconfont这个属性值,每一个图标都会对应一个编码,上面就是
来自知乎:
官方:http://www.iconfont.cn/help/iconuse.html
下载到本地:
下载到本地后,我们解压会看到如下文件:
我们把它全部复制到工程中然后利用标签引入iconfont.css即可。
那么就会在页面中出现你要的图标展示效果,怎么样不错吧!
当然还有其他一些字体图标库,比如 ,有兴趣也可以看看。
目前正在准备一些前端开发常用的工具,大家有的话欢迎进行交流!