AI 助理
文档备案控制台
开发者社区 人工智能 文章 正文

在程序中使用自己设计的ICON图标

2022-08-16 777
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 使用thymeleaf模板引擎，少不了图标，常用的图标库：FontAwesome、glyphicons；那么如何把自己设计的图标引用到自己的程序中去呢？

要想使用自己设计的图标到程序中去，我们需要借助一个网站，阿里矢量图 https://www.iconfont.cn/
注册个账号，在资源管理中创建项目,自己使用AI去设计图标，然后上传到自己项目中去，点击下载至本地
image.png

会得到压缩包，解压后看到这些东西
image.png

把上图中除demo.css和demo_index.html外，都上传至自己项目的static下的font中，在页面中引用iconfont.css，使用的时候，在class中添加
image.png

即可

文章标签：
人工智能
yafengliang
目录
相关文章
长梦
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断：深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句，它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧，包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性，避免 falsy 值陷阱，利用逻辑运算符优化，并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
长梦
1027 0
张起灵-小哥
|
缓存 JavaScript 前端开发
SpringBoot——Thymeleaf中的th:inline（内敛文本text、内敛脚本javascript）
SpringBoot——Thymeleaf中的th:inline（内敛文本text、内敛脚本javascript）
张起灵-小哥
2640 0
SpringBoot——Thymeleaf中的th:inline（内敛文本text、内敛脚本javascript）
博客zhu虎康
|
Windows
Keil5中恢复默认布局-解决左边栏，底部栏位置不是默认布局
Keil5中恢复默认布局-解决左边栏，底部栏位置不是默认布局
博客zhu虎康
2802 0
代码bug生产队
|
8月前
|
数据采集 数据库 Python
Python异步编程入门：告别“等待”，让代码飞起来
Python异步编程入门：告别“等待”，让代码飞起来
代码bug生产队
426 100
热烈的马
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
热烈的马
776 0
aliyun0598152856
|
缓存 JavaScript 前端开发
JavaScript 的三种引入方法详解
在网页开发中，JavaScript 可通过内联、内部脚本和外部脚本三种方式引入 HTML 文件，各具适用场景。本文详解其用法并附完整示例代码，帮助开发者根据项目需求选择合适的方式，提升代码维护性与开发效率。
aliyun0598152856
1795 110
建站专业户
|
7月前
|
域名解析 开发框架 .NET
从零开始：注册域名、租用主机并部署PageAdmin CMS完整教程
本文详细介绍了注册域名、租用虚拟主机、上传PageAdmin CMS并完成网站部署的全流程。从域名查询购买、主机环境配置到程序安装，提供完整的操作指南，帮助新手顺利完成网站上线。
建站专业户
763 5
阿里云基础设施.
|
人工智能 运维 Serverless
【云故事探索 | 文末留言有礼 】No.1：看森马服饰，在阿里云上如何用 AI 实现创新？
【云故事探索 | 文末留言有礼 】No.1：看森马服饰，在阿里云上如何用 AI 实现创新？
阿里云基础设施.
559 0
程序员小假
|
XML Java API
说一说 @Autowired 注解实现原理
我是小假 期待与你的下一次相遇 ~
程序员小假
456 2
一位隐者
|
边缘计算 5G vr&ar
6G：下一代通信技术的演进与展望
【10月更文挑战第6天】
一位隐者
814 1
6G：下一代通信技术的演进与展望

热门文章

最新文章

  • 1
    Nginx极简实战—Nginx服务器高性能优化配置，轻松实现10万并发访问量
  • 2
    推荐3款 Docker 认证的实用免费插件，帮助您快速构建云原生应用程序！
  • 3
    jar包和war包的介绍与区别
  • 4
    微服务与配置中心：别让您的微服务被配置管理“绊”了一跤
  • 5
    阿里视频云最强转码技术揭秘：窄带高清原理解析+用户接入指南
  • 6
    阿里云 CSI 插件介绍
  • 7
    光猫的两种工作模式：路由模式和桥接模式
  • 8
    IP、掩码、网关、DNS1、DNS2到底是什么东西，ping telnet测试
  • 9
    真牛！阿里最新发布这份《亿级高并发系统设计手册》涵盖所有操作
  • 10
    如何升级MacOS到指定版本
  • 1
    加油机数据采集设备加油机数据采集器加油机智能采集器液位仪数据采集设备原厂成品油流通数智化综合监管平台技术原理与落地应用解决方案
    44
  • 2
    一文分清阿里云个人测试证书：免费版与 Pro 版费用、有效期、权益全梳理
    30
  • 3
    阿里千问办公价格一览：个人免费版、标准版、高级版套餐权益对比
    56
  • 4
    【最新版】C语言运算符优先级和结合性速查表（附记忆口诀）
    30
  • 5
    MySQL安装教程|MySQL8.0下载到配置一篇搞定（图文版，巨详细）
    42
  • 6
    image 2.5刷屏了：有人拿它做广告，有人已经做出了动画
    33
  • 7
    秋招笔试没考到的大模型测试题，面试已经在问了
    30

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！