首页IT科技阿里巴巴(手把手教你如何在项目中使用阿里字体图标IconFont)

阿里巴巴(手把手教你如何在项目中使用阿里字体图标IconFont)

时间2025-09-06 09:52:37分类IT科技浏览5783
导读:阿里图标官网地址:IconFont-阿里巴巴矢量图标库 一、注册账号...

阿里图标官网地址:IconFont-阿里巴巴矢量图标库

一                、注册账号

要使用阿里图标               ,首先你要在它的官网注册一个账号                        ,注册的方式有多种(手机号        ,Github           ,微博                       ,阿里域账号)            ,根据你自己的情况进行选择                。具体操作很简单        ,这里就不赘述了                       。

二                       、创建项目

虽然你不创建项目也能通过直接下载代码使用字体图标                       ,但是后期维护会很麻烦        。比如你已经生成了字体图标文件                ,并且已在项目开发中使用            。后期如果要追加图标 ( 原先的图标不够用 )     ,由于你之前没有创建项目                       ,那么想要追加图标的话成本很高                    ,操作很麻烦                       。所以,每个为项目建立独立的字体图标项目是很有必要的           。

创建流程如下:

找到菜单中的 【资源管理】=> 【我的项目】点击进入                   ,进入之后点击右侧的 【新建项目】                        ,如下图

【新建项目】按钮点击之后弹出如下表单    ,根据自己开发的项目填写相关内容

项目名称: 建议填写和你开发项目相同的名称               ,之后项目多了好区分查找 项目描述: 这个你们自己看着填                        ,随便无所谓 FontClass前缀: 这个是定义字体图标样式的前缀        ,默认icon           ,可自行修改                       ,也可以不改            ,看你们自己项目需求 Font Family: 字体名称        ,默认是iconfont                       ,可自行修改                ,也可以不改    ,看你们自己需求 字体格式: 这里是选择字体文件要生成哪几种格式                       ,因为不同的浏览器可能兼容性不同                    ,建议选择 WOFF2 WOFF TTF        。如果有彩色图标需求,请勾选 彩色                        。 所有者: 默认就是创建项目的人                   ,在当前界面不可修改               。后期通过【项目设置】进行修改                        ,比如从公司离职    ,要做工作交接时               ,你可以将这个项目的所有权转让给公司同事    。 操作者: 在当前界面不可修改                        。后期通过【项目成员】进行修改                        ,因为通常都是几个同事一起做一个项目        ,所以项目创建完之后可以把相关同事拉入项目           ,让同事可以访问此图标项目

补充说明:

为了给大家做演示                       ,我创建了一个名为 【DemoFontProject】的项目            ,后面做图标导入到项目的时候会用到 关于字体格式官方有相关的说明        ,具体说明如下:

iconfont 现在已经支持用户灵活的配置生成字体格式的功能                       ,可以在「我的项目」→右上角「项目设置」→「编辑项目」→「字体格式」中勾选需要的字体格式                   。默认将生成 WOFF2        、WOFF            、TTF 三种格式。.eot(IE6) 和 .svg 是非常「古老」的字体格式                ,而且不是 OpenType 标准    ,我们默认将禁用它们                       ,不推荐在项目中使用                    ,如果需要可以手动开启                    。同时彩色字体中不支持这两种格式,当勾选彩色选项后会自动禁用这两个选项                       。由于性能的原因                   ,默认也会禁用 Base64    。

项目创建完成之后                        ,你可以编辑项目    ,转让项目               ,删除项目和管理项目成员等                        ,操作按钮如下:

三                       、选择图标        ,加入购物车

在阿里图标库里面挑选你项目开发中所需要的图标           ,然后加入购物车                       ,如下图所示

四           、导入购物车图标到项目

当你选好了全部的图标并加入购物车之后            ,那么就可以将它们导入到项目了                。 具体步骤:

点击右上角的 【购物车】按钮        ,购物车按钮上会显示当前购物车有多少个图标 在弹出的框中点击 【添加至项目】按钮 选择创建的图标项目                       ,我这里是刚才创建的 【DemoFontProject】 点击【确定】

五        、下载图标文件到本地

图标导入到项目之后                ,我们查看项目就可以看到导入的那些图标了    ,我们直接点击下载至本地就可以了                       。

 下载下来的是一个压缩文件                       ,解压之后如下图

六                        、添加字体图标文件到项目

我们在项目中的 assets 文件夹下创建一个 fonts 文件夹                    ,然后把第五步下载下来的文件,复制到 fonts 文件夹内即可                   ,添加好后如下图:

其中 demo_index.html 和 demo.css 文件其实是可以不放入到项目中的                        ,但是为了方便查看样式名称和对应图标    ,还是放入到项目中比较方便        。如果你实在不想放到项目中               ,那就把它们删了吧                        ,之后想查看图标样式就登录iconfont官网进入图标项目中查看即可            。

七               、项目中使用 (这里以VUE项目为例)

字体文件添加到项目中过后        ,我们要想在项目中使用它           ,还需要对样式文件进行导入                       ,导入方法就是在main.ts中引入iconfont.css文件即可                       。如下图:

由于我的项目是基于typescript开发的            ,所以文件后缀名是.ts        ,如果你的项目不是基于typescript开发的                       ,则在 main.js中导入iconfont.css文件即可           。

然后就可以在项目中通过样式使用图标了

<i class="iconfont icon-add-circle"></i> <i class="iconfont icon-arrow-up-circle"></i> 复制代码

其中 iconfont 就是在【新建项目】中【Font Family】定义的名称                ,如果你创建项目时【Font Family】填写的是 xxyy    ,那么使用的时候就如下使用:

<i class="xxyy icon-add-circle"></i> <i class="xxyy icon-arrow-up-circle"></i> 复制代码

我们发现所有样式名称都有相同的前缀 icon                       ,如上面的 icon-add-circle 和 icon-arrow-up-circle都是以 icon 为前缀的                    ,其实这也是我们在【新建项目】中【FontClass前缀】定义的        。我们定义的前缀是 icon,所以它们都是以 icon 为前缀的                        。

最后关于追加图标的问题简单说一下:如果项目进入开发阶段了                   ,发现图标不够用                        ,那么只需要往我们创建的图标项目中添加图标    ,然后重新下载文件               ,然后覆盖原有的 fonts 文件下的文件即可               。好了                        ,关于 iconfont 的整个使用过程就介绍完了        ,如有疑问           ,可以留言                       ,谢谢大家:)

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
如何规划SEO工作(为您详解SEO工作中的规划流程及关键要素)