初次使用fonticon阿里巴巴矢量图标库

初次使用fonticon阿里巴巴矢量图标库之前在学校自学前端时 自己做一些小的纯静态 html 文件练手时 就经常由于没有合适的图片或者图标而困扰 很长的一段时间都是当缺少资源时当场百度或者使用 bootstrap 中自带的字体图标 由于自己寻找的资源都是临时找的 所以当这些图片或者图标出现在一个 html 中就显得非常不协调 当时同学也推荐我使用阿里巴巴的图标库 但是当时登录好像对账号有限制 所以没有去使用 我在实习时 发现同事在使用字体图标时也是用的阿里巴巴的图标库 于是在这里整理一下阿里巴巴图标库的使用 在经过登录 查找图标之后 1 搜索图标 添加入库

1.搜索图标,添加入库

步骤1

2.点击购物车

步骤2

3.添加至项目(也可以新建项目)

步骤3

4 加入项目或者新建项目之后,你需要的图标就在该项目中,你需要生成css代码,点击在线生成

步骤4

5等待之后,将生成的css代码直接粘贴至项目中的公共样式中

步骤5
再定义一个iconfont的类名(根据自己的需求)

.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } 

6.然后点击复制图标的代码,便可以直接在html中使用

//类名为iconfont,中间的内容则是你复制的图标代码 

这样便可以使用阿里巴巴的字体库了。如果想要中途新加icon字体图标,只需要将新的字体图标加入刚刚创建的项目,随后点击更新代码,将新的css赋值覆盖上一次使用的css代码即可。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/225269.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 上午9:41
下一篇 2026年3月17日 上午9:42


相关推荐

发表回复

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

关注全栈程序员社区公众号