前端必会 svg转iconFonts字体图标库详细教程

原创 已于 2022-09-21 14:52:22 修改 · 6.3k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

于 2019-02-13 09:27:04 首次发布
本教程详细介绍了如何通过阿里巴巴矢量图标库将SVG文件转化为字体图标，包括上传SVG文件、创建项目、添加图标到项目及在HTML中使用字体图标的具体步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

字体图标制作教程

  1. 第一步：打开阿里巴巴矢量图标库

参考

​

  1. 第二步：上传需要制作成字体图标的svg文件至网站

​

​

选中svg文件打开

​

上传结束并保存

​

  1. 第三步：新建项目（用于转化svg==>iconFont）

​

注意类名前缀 比如预案项目 前缀就填plan    FontFamily填相关字体planFontFamily

​

  1. 第四步：把svg图标加入购物车 并添加至项目 最后下载解压完成。

​

​

​

​

​

第五步：html中使用方式如下：

​

自学前端第二十五:web字体图标使用
weixin_47592060的博客
03-17 849
web字体图标:本质是字体,伪元素联用的 出现一个白色框即字体失效的检查： ①路径那里是不是fonts文件夹的第一子路径就是全部的文件。 ②/+unicode编码 和 转义编码 有没有弄棍 （一个给content的，一个给html标签上的） ③有没有引入@iconface的ont-family 和 具体引入属性 font-family。（两个 font-family） 一.字体文件格式 不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。 1、TureType(.ttf)格
前端必备技能 webpack - 8. webpack打包处理字体图标文件
qq_39506551的博客
11-24 633
前端必备技能 webpack - 8. webpack打包字体图标
fancyicon:一个svg转iconfont文件的工具
05-19
FancyIcon power by fancylin 一个跨平台的iconfont自动生成工具 下载链接 使用步骤 拖入svg图标，或原本已生成好的iconfont.config.json 可修改图标名称，该名称为生成iconfont class 名称，如名称为 car，那么对应该iconfont的css class为 .iconfont-car 点击下一步，选择生成字体存放目录 可更改生成iconfont的字体包名称，iconfont对应css class 的前缀，如 iconfont可改为icon 点击确认，即可生成iconfont字体图标，对应的css，和一个示例页面 使用视频 开始开发 # clone from git git clone https://github.com/linfancy/fancyicon.git # install dependencies cd fan
通过svg可以转换成iconfont字体图标
xianqirse的博客
02-02 2652
前些天，因为项目需求，菜单要求图标为字体图标，但是UI设计图只给了png格式，所以研究了一番，可以通过把png转换为svg格式，然后通过在一个网站上转换为iconfont字体图标，并可以打包用在实际项目中 具体步骤如下： 1、打开https://icomoon.io/app/#/select地址，如下图所示： 2、选择Import Icons从本地计算机中导入svg图标，此时会在Untitled Set中显示出来上传的svg图标。 3、选择图标，选择好之后的图标会高亮显示。 4、接着在最下边选择Gene
前端绘图基础——SVG详解
最新发布
警警的博客
05-25 2221
SVG图像包含在一个<svg>元素内，该元素可以包含多个图形元素，如圆形（<circle>）、矩形（<rect>）、线条（<line>）、多边形（<polygon>）、路径（<path>）等。<svg>元素可以定义宽度（width）和高度（height）属性，也可以包含viewBox属性来定义SVG的视图区域和比例。 在 SVG（Scalable Vector Graphics）中，`<defs>` 是一个**容器元素**，用于`存储可能会在文档其他地方重复引用的图形元素`、样式、滤镜、渐变、图案等。
将svg图标转换成iconfont图标
sxj的专栏
12-01 4530
1、打开https://icomoon.io/app/#/select地址，如下图所示： 2、选择Import Icons从本地计算机中导入svg图标，此时会在Untitled Set中显示出来上传的svg图标。 3、选择图标，选择好之后的图标会高亮显示，如上图。 4、接着在最下边选择Generate SVG & More，如下图所示： 5、选择好之后此时是如下界面： 6、选择Generate Font F即可生成，如下图所示： 7、然后在css中进行定义，如： 注
SVG转字体图标
11-26 623
SVG转字体图标 一. 问题？ SVG和字体图标的区别是什么？为什么要转换使用？ SVG如何转换字体图标？ 转换过程中遇到的问题有哪些？ 二. 解答 SVG和字体图标的区别以及转换字体图标的好处 SVG和字体图标都是矢量化图形 SVG（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是...
svg图片转iconfont字体图标
qq_41714508的博客
12-27 1435
svg图片转iconfont字体图标
CSS——web字体与CSS字体图标
流楚丶格念的博客
07-09 4365
文章目录web字体字体格式字体图标字体图标优点字体图标使用流程设计字体图标上传生成字体包下载兼容字体包字体引入到HTML第一步：在样式里面声明字体： 告诉别人我们自己定义的字体第二步：给盒子使用字体第三步：盒子里面添加结构追加新图标到原来库里面 web字体 字体格式 不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。 1、TureType(.ttf)格式 .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、C
Vue3从0到1组件开发-基础组件：Icon图标库
qq_35117063的博客
08-06 1644
theme: smartblue 这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战 必不可少：图标库 它真的必须吗？ 21世纪已经过去了20年了，前端也已经发展了20多年了，随着用户的审美越来越高，对用户体验的要求也越来越高，我想已经很少在主流网站中找到一个不用图标的网站了吧？ 而最开始的图标多以图片为主，后为了优化、减少请求有了雪碧图的概念，但它仍然是图片，图片的加载始终是较慢的。之后有了svg，才终于好了一点，但是也使用起来也并不方便，零零散散的。 而随着阿某推出iconfont网站之后，字.
实现霓虹灯效果的前端图标菜单特效分享
- **图标字体（Icon Fonts）**：在前端开发中，图标字体被广泛用于代替传统的图像文件。通过定义字体图标，可以更容易地控制图标大小、颜色和阴影等视觉效果。在霓虹灯菜单特效中，可以使用诸如Font Awesome、...
svgs2fonts：npm-svgs2fonts。svg图标转字体图标库（svgs-> svg，ttf，eot，woff，woff2），nodejs
02-05
svgs2fonts svg图标转字体图标库（svgs-> svg，ttf，eot，woff，woff2）。 版本 1.0.4 安装 npm i -g svgs2fonts 验证 svgs2fonts -v 使用 svgs2fonts {{srcpath}} {{distpath}} --options 其中参数： srcpath：svg源文件路径（相对当前窗口环境），传“”时为当前窗口路径; distpath：导出路径，替换在源文件路径下； 例 svgs2fonts svg dist 节点js const svgs2fonts = require ( 'svgs2fonts'
nuxt-fontagon:尝试将svg轻松转换为字体，以自动制作图标字体。 Nuxt模块上提供了Icon-Font生成器Fontagon
05-28
:paw_prints: 纳克斯特·方塔贡 轻松将SVG从nuxt转换为图标字体。 尝试将svg轻松转换为字体，以自动制作图标字体。 Icon-Font生成器在Nuxt模块上可用。 信息 :bell: 该软件包已从nuxt-iconfont-generator重命名为nuxt-fontagon 特征 √在构建时自动将svg转换为字体文件√根据svg文件名，根据需要创建CSS和Stylus ， SASS和LESS文件 :bell: nuxt-fontagon使用Fontagon功能。 请参阅 安装 将nuxt-fontagon依赖项添加到您的项目中 # Using npm npm install --save-dev nuxt-fontagon # Using yarn yarn add --dev nuxt-fontagon 添加nuxt-fontagon到buildModules的部分nuxt.config.
IcoMoon的用法（SVG转化为ICONFONT）
HeliumLau的博客
03-15 1万+
ICONMOON前言　　最近在做移动端的一个项目，在对图片处理上非常纠结。偶然得知了可以将SVG图片转换为ICONFONT，这里面的好处就不多说了，但这篇笔记的主要目的还是记录整个过程。PNG到SVG　　一般而言我们从UI得到的图或者自己切的图都是PNG，JPG格式的位图。而IconMoon上只接受SVG格式的图片或者JSON。 　　所以我们第一步就是把PNG图片转换为SVG图片。 　　需要有的
svg转化成icon图标的方法
qq_40816649的博客
10-15 1万+
通过这个官网来讲svg转化成icon图标https://icomoon.io/app/#/select 首先先键可以空的项目 出现如下目录 上传你的svg文件 选中上传后的图片，兵点击generate font预览 鼠标放在对应的项上回显示出get code使用方法，确认之后点击downlond下载 解压下载好的文件夹 将解压后的font文件夹和style.css...
icomoon图标的使用
热门推荐
宇宙的博客
07-05 2万+
早上听同事介绍icomoon的图标，自己上网查找用例，发现确实挺好用，只需在网址： https://icomoon.io/app/    上选择相应图标点击font设置，然后点击下载。将下载文件解压，然后将font文件夹和style.css拷贝到项目中，引用css即可，作为以后参考 转载了相关介绍：转载自：http://blog.youkuaiyun.com/u013938465/article/detai
svg图标转字体图标
WoNiu_UU的专栏
10-17 2851
需要登录的网址 http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 把svg图标制作成字体图标的步骤 第一步：右上角 点击阿里云图标登录，如下图： 第二步：点击上传，如下图： 弹出文件选择框，可以选择多个svg图片后，如下图： 点击“保留颜色并提交”按钮，进入下图：ppppppopopop ...
svg-icon的使用（将svg转换为icon来使用）
weixin_60974764的博客
07-09 2828
svg-icon使用
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值