项目中使用阿里图标

项目中使用阿里图标1 阿里图表网站 https www iconfont cn 2 注册登录 3 创建项目 4 查找想要的图标 加入购物车 5 把所有需要的图标均加入购物车 单击购物车 按下图 把图标加入到项目中 6 进入到项目中 修改图标在

大家好,欢迎来到IT知识分享网。

1、阿里图表网站

https://www.iconfont.cn/

2、注册登录

3、创建项目

项目中使用阿里图标

4、查找想要的图标,加入购物车

项目中使用阿里图标

5、把所有需要的图标均加入购物车,单击购物车,按下图,把图标加入到项目中

项目中使用阿里图标

项目中使用阿里图标

6、进入到项目中,修改图标在代码项目中的引用名称

项目中使用阿里图标

项目中使用阿里图标

7、图标名称修改完成后,点击“下载到本地”,下载项目中的所有的图标。下载后的文件目录如下图所示,

项目中使用阿里图标

8、打开https://transfonter.org/网址,点击“add fonts”按钮,选择要转换的文件。选择上面下载的文件目录中的“iconfont.ttf”文件。

项目中使用阿里图标

项目中使用阿里图标

9、下载转换后的文件

项目中使用阿里图标

10、把转换后的文件目录中的“stylesheet.css”文件中的代码复制到代码项目的css文件中,再把被转换的文件中的“iconfont.css”中的.iconfont{以下的所有代码复制到代码项目的css文件中

项目中使用阿里图标

项目中使用阿里图标

项目中使用阿里图标

 

项目中使用阿里图标

11、在项目代码中的标签的class属性使用 iconfont icon-repair等引入图标,如<span class=”iconfont icon-repair”></span>

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/137412.html

(0)
上一篇 2025-06-20 18:45
下一篇 2025-06-20 19:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信