阿里iconfont字体图标的使用

iconfont 为大家提供了很多开箱即用的图标库,同时也提供了灵活的集成办法。

在一个项目中嵌入你想要iconfont字体图标,跟着下面的步骤一步步来实践一下:

创建项目

iconfont 的【资源管理 => 我的项目】中创建一个项目,取个名字,字体格式根据需求选择,一般就默认加上一个Base64。

iconfont字体图标的使用

将图标添加到项目

方法就是在素材库中搜索想要的图标,然后点图标上的购物车图标(添加入库),然后在右上角的购物车中添加到你刚新建的项目中。

获取代码

在项目页面下载代码到本地:

iconfont字体图标的使用

嵌入项目

下载解压后的目录包含:

iconfont使用示例

其中demo_index.html是告诉你怎么用的,根据自己需要选择引用方式,我这边使用Font class的方式,将下载到的代码中需要的文件放到项目资源目录下,然后在页面中引入iconfront.css即可,说明:

iconfont使用说明

在使用时,比如我这次选了几个图标中,有微信图标他的class类是icon-wechat,那我在页面上只需要使用:

<span class="iconfont icon-wechat"></span>

就可以正常显示微信图标了。

后期如果有更多图标加入,只需要将图标加入到项目,然后重新下载代码然后覆盖那些需要的文件可以了。

线上模式嵌入

iconfont 还提供了线上模式集成只需要在项目界面生成一下代码,然后将生成的css地址嵌入即可,也可以尝试一下。

阿里iconfont字体图标的使用

原文链接:https://beltxman.com/3840.html,若无特殊说明本站内容为行星带原创,未经同意禁止转载!

更多精彩,敬请关注本博微信公众号:hsu1943

发表评论

您的电子邮箱地址不会被公开。

Scroll to top