阿里巴巴矢量图标库的使用细节
之前都在用iconmoon,今天在更换一个按键图标时用了阿里巴巴矢量图标库,因此记录一下不同和细节
准备工作
- 登录
- 选择图标库
- 在创作者的icon中选择
(如需要可以加入自己仓库/收藏/下载)
- 在顶部菜单栏找到:帮助/代码应用/web端使用(认真阅读)重要哦!!
使用方式
iconfont的web端使用指南提供了四种方式
- icon 单个使用(下载图标使用)
- unicode引用(下个段落对比与iconmoon的异同点)
- font-class引用(后两种自行阅读)
- symbol引用
使用异同(unicode引用)
- 阿里需要先加入项目(在仓库添加),添加到项目后可以:修改/下载/复制代码等操作
- 下载好图标库后,将项目压缩包里的font文件夹复制到html文件的根目录:两种图标库的文件夹名称不同,不予理会
- 字体声明:拷贝项目生成的font-face:下载图标压缩包中的ccs文件,这里字体声明的url里需要在开头加上font文件夹路径(因为默认没加路径),比如:
src: url('font_8viwxqtb7v5/iconfont.ttf?t=1665134932112') format('truetype');)
- 定义使用iconfont的样式:同样在css文件中有
- 在自己下载的项目里挑选相应的图标并获取字体编码(也可用浏览器打开在压缩包中的html文件获取),代码如下
<i class="iconfont">3</i>
tip:可直接导入css文件模块化比较方便(注意文件夹路径)
疑问
- 在csdn看到有使用url为'http://~~'的用法,自己却没成功,不知到底能不能获取图标
总结
细心细心再细心!!!(o゚v゚)ノ
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)