Ai 制作简单的iconfont字体图标

最新推荐文章于 2025-12-13 12:08:54 发布
原创 最新推荐文章于 2025-12-13 12:08:54 发布 · 2.3k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#ui
该文指导如何使用AI软件制作900x900的圆和添加文字，建立复合路径，扩展对象，保存为SVG格式。然后在Iconfont平台上上传图标，经过审核后保留颜色并提交。

  1. 打开网址https://www.iconfont.cn/icons/upload?spm=a313x.7781069.1998910419.d059fa781

  2. 下载矢量图标设计模板,如图在这里插入图片描述

  3. 打开下载的图标制作模版.ai文件

  4. 点击椭圆工具画一个大小为900*900的圆
    在这里插入图片描述

  5. 点击文字工具，输入文字内容并调整为合适的大小，例610px
    在这里插入图片描述

  6. 选中圆形–右键–建立复合路径
    在这里插入图片描述

  7. 选中字体—对象—扩展
    在这里插入图片描述

  8. 点击确定
    在这里插入图片描述

  9. 按住shift，选中字体和图形 —剪去顶层

  10. 文件—存储为
    在这里插入图片描述

  11. 保存类型(SVG)—确定 在这里插入图片描述

  12. 最终效果如图所示：
    在这里插入图片描述

  13. 上传iconfont图标库，打开网址https://www.iconfont.cn/icons/upload?spm=a313x.7781069.1998910419.d059fa781

  14. 点击上传图标按钮
    在这里插入图片描述

  15. 选择需要上传的图标

  16. 审核通过后，点击保留颜色并提交
    在这里插入图片描述

使用阿里巴巴图标库生成iconfont字体图标
热门推荐
soos的博客
01-09 1万+
iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制，但是缺点就是只能实现一种颜色，不能像图片那样含有各种颜色。 通过阿里巴巴图标库制作字体图标步奏如下（默认已注册阿里巴巴图标库）： 1、首先搜索所要展示的图片，找到后点击入库。 2、点击入库的图标，结果如下图所示，选择添加至项目或点新建项目。 3、点击确定之后如下图所示，鼠
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8766
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
AI如何帮你快速生成Iconfont图标库？
最新发布
CyanWave34的博客
12-13 413
未来可以进一步探索AI对复杂图标的支持，比如动态交互图标或3D风格。输入关键词（如“设置”、“搜索”），AI会根据语义自动生成多种风格的图标。现在借助AI工具，我们可以快速生成符合需求的Iconfont图标库，大幅提升开发效率。确定需求后，选择支持AI生成SVG图标的工具，比如。AI生成的图标可能需要微调。例如，检查线条粗细是否统一，或调整图标在较小尺寸下的清晰度。比如，过去需要半天设计的20个基础图标，现在10分钟就能生成初稿。的一键部署功能还能直接预览图标在网页中的效果，省去了本地调试的麻烦。
三分钟教会你自制 iconFont 字体图标库
非著名程序猿
10-24 1万+
app开发的时候，我们大多会用到字体icon，下面我们就讲解一下，如何自定义生成 iconFont 一般情况，我们优先选择在 Iconfont-阿里巴巴矢量图标库 下载我们需要的矢量icon的svg格式, 如果这里没有你需要的icon，也可以自己切图把png格式的图片转化为svg; svg 导入并生成 font 在线转换网址 导入多个svg图片 点击右下角 记好每个icon的code 然...
如何借助 AI ，生成专属图标？ #iconify AI
shadowcz007的博客
02-18 3519
不到一分钟，就可生成个性化专属图标？这款 AI 图标工具有多神奇？iconify AI在几秒钟内为应用程序/网站创建专业图标。告别传统应用图标设计的麻烦和费用，让 AI 设计用户的专属品牌图标。图源：iconify AI如何用 iconify AI 创建图标？step1在框中输入想在图标中看到的对象图源：iconify AIstep 2选择图标的颜色图源：iconify AI ...
制作生成IconFont
chenlijian的博客
07-14 4244
前言 当设计稿有出现小图标时，如果以 img 或设置 background 等方法，图标会出现模糊状态，影响整体视觉。为了防止此类发生，推荐使用 IconFont。 一、 IconFont特点 图标清晰，无毛边，对于需要缩放多个尺寸的图标，是个很好的解决方案； 文件加载体积小； 可以直接通过 css 的 font-size，color 修改它的大小和颜色； 支持一些 css3 对文字的效果，例如：阴影、旋转、透明度； 兼容低版本浏览器； 二、 生成 IconFont 设计提供图标的SVG文件。
别再用FontAwesome了
Quincylk的专栏
11-02 1万+
转：https://www.jianshu.com/p/5d4a39cdf96d 图标技术哪家强？ 你脑海中第一个闪现的，必然是 fontawesome、ionicons、google icons...是的，确实很方便，直到今天之前，我还在用着FA，还在为了一个图标翻遍他的网站，就像这样： image.png 不得不说，这是一件很费眼睛的工作， 但最要命的是: 绝大多数时候你无法找到想...
Vue3 项目引入阿里 iconfont 图标和字体的多种方式
共同学习，共同成长
09-19 5610
对比阿里图标库提供的3种图标引用方式：unicode、font-class、symbol。以及在vue3+vite+ts的项目中封装并使用阿里iconfont图标组件，以及如何使用阿里字体图标。
如何在vue项目中系统的使用iconfont字体图标
m0_50210161的博客
08-20 3045
如何在vue项目中系统的使用iconfont字体图标前言iconfont的特色官网注册在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式，前端的图标经过这些年的发展，变得更系统化了，从最开始，我们使用的img图标，需要一个一个导入，再后来发明雪碧图，所以图标放在一张图上，利用定位进行使用，但是在添加新图标的时候，也会让之前图标的定位改变。维护起来也十分不方便，再到后来兴起fontawesome，用cdn进行引入，直到现在最终投入阿里iconfont的怀抱中。使用它可以方便快捷的管理整个项目的
iconfont 图标字体 用矢量字体实现图标 备忘
过客代码站
02-21 5723
此技术已应用在天猫、淘宝等网站上。 技术核心就是把Ai、SVG等矢量图转换为ttf、woff等浏览器认可的外部字体，引入后，在html中用对应的unicode来进行图标的显示。 这个方法主要解决了图标在不同设备上的分辨率问题。（矢量字体，随意缩放） http://iconfont.cn/ 之前自己想过用FontCreator自己制作字体，没想到用这种类似的方式还
css自定义字体
weixin_30408309的博客
05-05 356
css自定义字体的兼容问题 来源http://www.w3cplus.com/content/css3-font-face 一、TureTpe(.ttf)格式： .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Saf...
AI Icon Generator:免费的AI图标生成器,一键生成你想要的图标（附试用链接）
AIGC Studio：分享AIGC前沿知识和好玩应用，公众号同名。
03-05 9255
AI Icon Generator是一款允许任何人使用人工智能技术创建或生成图标的工具。借助 AI 图标生成器，任何人都可以根据文本创建独特的个性化图标。AI Icon Generator 利用 AI 技术实现设计过程自动化，使任何人都可以轻松生成任何图标，无论其设计技能或经验如何。
AI绘图实战（一）：制作购物车图标icon | Stable Diffusion成为设计师生产力工具
暂时先用这个名字
04-07 6109
S：你安装stable diffusion就是为了看小姐姐么？I ：当然不是。在midjourney上制作icon算是一大特色，那stable diffusion就只能小姐姐么？不，今天我们用stable diffusion制作一个购物车icon试试。
如何在vue项目中使用iconfont字体图标（自己上传svg生成iconfont）
Orange71234的博客
07-06 1984
需要在复制的地址前面加上。如图这样就配置成功啦。：一般项目中建议使用。
如何做一个iconfont字体图标管理平台
weixin_39355521的博客
12-05 899
前端开发经常会用到字体图标，通过css引入字体，给元素指定对应的class就能显示图标，非常方便。网上也有一些开放的图标库，比如阿里的iconfont提供图标搜索和下载的功能，还可以上传svg，生成字体文件并生成css链接，直接在项目引用。
svg矢量图字体图标iconfont的制作
weixin_64378410的博客
08-09 1072
如何使用svg矢量图制作字体图标
iconfont字体图标以及css字体图标在线制作和使用（推荐）
五颜六色的白
12-26 6312
字体图标的制作和使用呢，也不一定非要自己去 https://icomoon.io/ 网站制作，那样子貌似有点麻烦，那么这里给大家一种更简便的操作方式，方便快捷的制作并使用字体图标，同样的，我们还是离不开（阿里巴巴图标库） （一）字体图标的生成 1>进入到（阿里巴巴图标库） https://www.iconfont.cn/ 并登录 ,搜索到你想要的图标并加入购物车，想要多少加多少哈哈 加入购...
svg图片制作iconfont字体图标
winne雪
11-06 1774
制作网址：https://icomoon.io/app/#/select download下载下来有用的文件有两个，fonts文件夹就是字体图标文件，style.css文件就是样式文件。 demo.html可以查看如何使用对应的那个图标（仅在查看用，也可以直接看样式文件的类名方式引入，不需要拷到项目中，参考iconfont的下载的那些文件作用）。 ...
【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!
极客小俊
01-26 4847
国内功能很强大且图标免费内容很丰富的矢量图标库!
花了 2 天时间开发的 IconAI 生成器
u010549407的专栏
03-30 465
关于制作 icon 观察了其他很多 ai 生成 icon 的网站，都很强大，除了通过提示词快速生成 icon ，还可以定制颜色、风格等；不过各有优劣，部分 icon 生成的不太符合审美😂，大多数使用场景也不太相同，于是做了一个偏手机应用场景的 icon 站，现在只支持输入英文提示词。上次的 ai 壁纸站由于首次使用nextjs生态，大概用了1个多月上线，现在已经熟悉用 nextjs 生态，在经历一次从前端技术、oauth 、图床到数据库，每一个环节摸索之后，这次开发 iconai 只花了 2 天。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值