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

已于 2022-09-21 14:52:22 修改
阅读量5.8k 收藏 10
点赞数
文章标签： 前端 javascript 开发语言
于 2019-02-13 09:27:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39562867/article/details/87159787
版权

字体图标制作教程

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

参考

​

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

​

​

选中svg文件打开

​

上传结束并保存

​

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

​

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

​

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

​

​

​

​

​

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

​

拥抱天空唯一的
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
SVG 字体 – SVG image（14）
https://shixuebin.gitee.io/hexo-blog/
01-29 55
元素的属性指示文件(位图)的内容应显示在当前用户坐标系内的给定矩形(“窗口”)中。– 用于图像渲染的“窗口”的宽度和高度。对象中包含和渲染位图。它也可以显示图像格式。– 控制图像的缩放方式。– 图像左上角的坐标。
图标：svg图片转字体图标
02-04
异象 isui组件库的高级图标字体。 由设计。 它们是免费使用的，并根据许可。 我们打算将此图标包与一起使用，但绝不仅限。 无论您是个人还是商业用户，都可以在合适的地方使用它们。 安装 npm install isui-iconfont --save HTML示例 您需要链接CSS < link rel =" stylesheet " type =" text/css " href =" node_modules/fonts/is-iconfont.css " > 用于更少： @import "~isui-iconfont/fonts/is-iconfont.css" ; 注意：它具
svg图标转Iconfont字体图标
热门推荐
菜得抠拇指
05-04 2万+
最近在实际开发项目中用到了SVG格式的图片，在web中用着挺麻烦的，所以想到了把svg转换成字体图标。 找到一个比较好用的svg转iconfont的网站，而且免费 附图  选中图标然后点击Generate Font然后下载就可以愉快的用自己制作的字体的图标啦 附链接 https://icomoon.io/ 使用 把下载下来的fonts文件夹和style.c
小程序svg转icon字体图标详细教程
KingDeeL的博客
07-17 1100
1、输入网址https://icomoon.io/ 2、点击这里 3、导入希望转换的图标并转换 4、 5、下载 到这里我们已经完成一半 因为小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。所以我们需要转码 解压我们刚才下载的包会用到的只有 iconfont.css ...
如何在vue项目中使用iconfont字体图标（自己上传svg生成iconfont）
Orange71234的博客
07-06 1285
需要在复制的地址前面加上。如图这样就配置成功啦。：一般项目中建议使用。
通过svg可以转换成iconfont字体图标
xianqirse的博客
02-02 2293
前些天，因为项目需求，菜单要求图标为字体图标，但是UI设计图只给了png格式，所以研究了一番，可以通过把png转换为svg格式，然后通过在一个网站上转换为iconfont字体图标，并可以打包用在实际项目中 具体步骤如下： 1、打开https://icomoon.io/app/#/select地址，如下图所示： 2、选择Import Icons从本地计算机中导入svg图标，此时会在Untitled Set中显示出来上传的svg图标。 3、选择图标，选择好之后的图标会高亮显示。 4、接着在最下边选择Gene
webpack根据svg生成iconfont图标
qq_38545368的博客
03-23 1245
一.使用webpack在项目中根据svg生成iconfont 1.安装webpack-iconfont-plugin-nodejs npm install webpack-iconfont-plugin-nodejs webpack-iconfont-plugin-nodejs官方说明(详细配置可查看官网):https://github.com/hzsrc/webpack-iconfont-plugin-nodejs 2.创建iconfont文件夹,结构如下图: 3.配置webpa...
svg-icon的使用（将svg转换为icon来使用）
weixin_60974764的博客
07-09 1757
svg-icon使用
svg转化成icon图标的方法
qq_40816649的博客
10-15 1万+
通过这个官网来讲svg转化成icon图标https://icomoon.io/app/#/select 首先先键可以空的项目 出现如下目录 上传你的svg文件 选中上传后的图片，兵点击generate font预览 鼠标放在对应的项上回显示出get code使用方法，确认之后点击downlond下载 解压下载好的文件夹 将解压后的font文件夹和style.css...
svg图片转iconfont字体图标
qq_41714508的博客
12-27 489
svg图片转iconfont字体图标
Bootstrap Icons开源SVG图标库-其他
06-29
Bootstrap Icons是Bootstrap开源的SVG图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建，现在可以免费用于任何项目，无论此项目是否使用了Bootstrap。 Bootstrap Icons是SVG图标库，...
Python实现程序：SVG图片转为ico图标
12-13
使用场景：很多时候下载的图片都是SVG矢量文件，不适用于需要 ico图片 的场景。 举例说明：比如，iconfont网站上下载...3. 输入的 ico图标文件 都存储在 存放SVG图片目录中的 icons子目录中，并会组建相同的文件结构。
webfonts-loader：使用SVG创建图标字体！
02-04
一个Webpack加载器，可以从SVG图标生成字体，并允许您在HTML中使用图标。 webfonts-loader使用插件创建任何格式的字体。 它还会生成CSS文件，以便您可以使用CSS类在HTML中直接使用图标。 安装 npm install web...
草莓图标是创造狮原创设计的一套前端字体图标库
08-08
草莓图标，是创造狮原创设计的一套前端字体图标库，所谓字体图标icon font就是将矢量格式的图标（一般是SVG）设计成web字体的形式，让使用图标也变得像调用字体一样简单。
前端如何单独做虚拟奖金池？
weixin_43968658的博客
04-13 945
【代码】前端如何单独做虚拟奖金池？
JEECG表格选中状态怎么去掉
最新发布
weixin_39031037的博客
04-19 141
官网代码（在取消选中状态的时候不生效）
#是啥，v-slot插槽的区别
思索的涟漪，突破自我
04-15 300
来定义具名插槽，以便更清晰地表达代码意图，并且能够充分利用 Vue 3.x 提供的新特性。是 Vue 2.x 中的插槽语法，在 Vue 3.x 中仍然兼容，但已经被废弃。用于具名插槽，它允许您为插槽指定名称，并允许您传递具名插槽的内容。是 Vue 2.6+ 和 Vue 3.x 推荐的新的插槽语法。在 Vue 3.x 中，您还可以使用。在 Vue 3.x 中，可以使用。都是用于定义插槽，但是推荐使用。
用 Java 写一个web教学管理系统
余璜的技术博客
04-15 485
从来没有用 Java 写过 web，给朋友帮忙，现学。记录下过程。
svg怎么做字体图标
09-11
嗨！要使用 SVG 创建字体图标，你可以按照以下步骤进行操作： 1. 选择或设计图标：首先，选择一个合适的图标或设计一个自定义图标。确保图标的尺寸和细节适合于转换为字体图标。 2. 创建 SVG 文件：使用图形编辑软件（如Adobe Illustrator、Inkscape等）创建或编辑你的图标，并将其保存为 SVG 文件格式。确保 SVG 文件中只包含单个图标，不包含其他不必要的元素。 3. 转换为字体格式：使用字体图标转换工具，将 SVG 文件转换为字体格式（如TTF、WOFF、EOT等）。常用的转换工具包括Fontello、IcoMoon、Fontastic等。这些工具通常提供用户友好的界面，让你可以上传并转换 SVG 文件。 4. 定义图标编码：在转换工具中，为每个图标定义唯一的编码。这些编码将在 HTML 或 CSS 中使用来显示特定的图标。 5. 引入字体文件：下载并引入生成的字体文件到你的项目中。确保将字体文件（如.ttf、.woff等）放置到适当的文件夹，并在 HTML 文件中添加对字体文件的引用。 6. 使用字体图标：在需要显示图标的元素中，通过设置 CSS 类名或直接使用内联样式，指定字体名称和编码来显示特定的图标。例如： ```html <i class="iconfont"></i> ``` 以上是使用 SVG 创建字体图标的一般步骤。你可以根据自己的项目需求和工具选择进行必要的调整和优化。希望对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值