李涛自留地
回到顶部
首页 > 前端 > 如何使用阿里云字体图标库iconfont?

如何使用阿里云字体图标库iconfont?

在前面一篇文章中,介绍了《前端开发人员常用的字体图标库有哪些?》,介绍了三种常用的字体图标库,其中阿里云的字体图库iconfont是中国国内最大最成功的字体图标库,在国内也有很多前端开发人员使用阿里云的字体图标库iconfont,那么阿里云的iconfont字体图标库该如何使用呢?在iconfont的官方也有详细的介绍如何使用iconfont字体图标库,接下来我们来看看如何使用阿里云字体图标库iconfont。

阿里云字体图标库iconfont官网:https://www.iconfont.cn/

在阿里云iconfont官网首页导航菜单处,我们可以看到有很多类型的字体图标库供我们选择,既有插画库又有字体库,而字体库下面又分别细化出了官方图标库、多彩图标库等类型,可见阿里云iconfont字体图标库的类型还是很丰富的,可以满足前端开发人员的很多图标需求。

如何使用阿里云字体图标库iconfont?

我们可以根据我们前端开发时的需求,寻找适合我们前端页面所需的图标,点击进入自己所需要的字体图标库后,选择需要的字体图标,然后把鼠标放入图标上点击添加购物车样子的图标添加入库,添加完自己所需字体图库后,点击页面右上角的购物车图标将自己所选择的字体图标添加至项目中,在项目页面中有三种引用iconfont的方式:UnicodeFont、fontclass、Symbol,对应的不同引用方式都有详细的使用介绍。

如何使用阿里云字体图标库iconfont?

将自己项目中的iconfont字体图标下载本地或者是上传到自己开发的项目中,根据不同的方式进行引用使用,需要注意的地方:

1、路径问题:在自己的html和Css样式必须正确书写iconfont.css路径,否则将不能成功使用iconfont字体图标,并且浏览器将报错。

2、自定义使用iconfont字体图库的时候,必须在自己的Css样式中引用@font-face字体声明。

以上就是李涛自留地为你介绍的如何使用阿里云字体图标库iconfont的方法,具体更加详细的使用方法可在阿里云iconfont字体图标官网中查看及实际操作中摸索。

若非作者标注皆为李涛自留地原创文章,转载或复制请以超链接形式并注明出处。