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

简介: 使用thymeleaf模板引擎,少不了图标,常用的图标库:FontAwesome、glyphicons;那么如何把自己设计的图标引用到自己的程序中去呢?

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

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

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

即可

目录
相关文章
|
2月前
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
11天前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
|
2月前
|
JavaScript 前端开发 定位技术
小图标还不会设计!
小图标还不会设计!
|
9月前
|
小程序 文件存储
【易售小程序项目】顶部导航栏和底部导航栏设置+iconfont图标引入
【易售小程序项目】顶部导航栏和底部导航栏设置+iconfont图标引入
80 0
|
iOS开发
iOS 启动图设置及icon图标设置
OS 启动图设置及icon图标设置
772 0
iOS 启动图设置及icon图标设置
|
12月前
|
小程序 前端开发 搜索推荐
微信小程序开发 | 如何在小程序中使用自定义 icon 图标
微信小程序开发 | 如何在小程序中使用自定义 icon 图标
|
C#
全网首发:C#中Form设置$this.Icon,任务栏图标错误的解决办法(bitmap转icon)
全网首发:C#中Form设置$this.Icon,任务栏图标错误的解决办法(bitmap转icon)
256 0
|
Android开发 网络虚拟化
Android 13.0 StatusBar顶部图标加载流程
Android 13.0 StatusBar顶部图标加载流程
|
Android开发
Android 10.0 顶部状态栏系统图标显示分析
Android 10.0 顶部状态栏系统图标显示分析
|
存储 XML 缓存
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
168 0
Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整