iconfont、svg图标字体下载并使用

最新推荐文章于 2024-02-05 14:09:20 发布
最新推荐文章于 2024-02-05 14:09:20 发布
阅读量3k 收藏
点赞数 1
分类专栏： vue JavaScript html 文章标签： html5 vue.js 自然语言处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44658440/article/details/120429652
版权
JavaScript 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
vue
3 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏

iconfont、svg图标字体下载并使用

文章目录

提示：以下案例可供参考

一、进入阿里巴巴官方字体库

点击进入阿里巴巴字体库

二、查找需要的图标并加入购物车

在这里插入图片描述

三、新建项目

1、点击添加至项目
在这里插入图片描述

2、点击新建项目
在这里插入图片描述
3、输入项目名称并确认
21aa1814583.png)
4、自动跳转至新建项目目录
在这里插入图片描述
5、点击项目设置
在这里插入图片描述
6、勾选字体格式SVG并保存
在这里插入图片描述
7、将项目下载至本地
在这里插入图片描述
8、保留需要的文件，即红色标注文件
在这里插入图片描述

四、使用svg图标库

在html文件中引入css文件即可。在这里需要注意的是，css文件中svg文件、ttf文件、woff文件的路径是否正确。

最后直接使用即可

<i class="iconfont icon-jiaoliu"></i>
丘壑™
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
iconfont_SVG-file_download:iconfont SVG文件下载 tampermonkey脚本
05-01
iconfont_SVG-file_download iconfont SVG文件下载 tampermonkey脚本
下载iconfont字体并使用、svg转换成iconFont
qq_42855675的博客
02-07 952
1.进入阿里巴巴官方字体库 https://www.iconfont.cn/ 2.加入购物车 3.选择颜色并下载代码 4.demo_index.html文件里加载了使用方法。有三种，本次只说明使用第二种Font class 5.复制5个文件到自己的项目文件夹下 6.在html中引入iconfont.css文件 7.使用: 8.运行： ...
iconfont 下载svg的时候不要设置颜色，否则拿到文件设置不了颜色
cccz1234的博客
04-28 471
iconfont 下载svg的时候不要设置颜色，否则拿到文件设置不了颜色，因为会在path标签上添加fill，后续再添加fill，优先级会被path给挤下去
批量下载iconfont某页所有svg
smart_dream
06-08 1049
在【谷歌浏览器右上角的…里面找到设置→扩展程序】或【浏览器右上角的…看到好的图标库，想把它里面的图标都下载到本地，网站并没提供该功能。扩展程序页面：点击加载已解压的扩展程序（即解压的整个文件夹）打开地址后，点击下载按钮→下载zip。安装成功后，导航栏有个小图标就是成功了。下载iconfont的图标库。下载到本地后，直接解压。下载我的项目的图标库。找个插件实现该功能。
【Vue-Element】矢量字体库iconfont字体图标库使用
feifeiyechuan的博客
08-04 1728
矢量字体库iconfont字体图标库使用
将阿里iconfont下载后包含多个svg图标的文件转换为单个svg文件
05-23
将阿里iconfont下载后包含多个svg图标的文件转换为单个svg文件
flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩
05-06
用纯JS把iconfont.cn的图标转换成Flutter Widget，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件 Step 1 在项目文件pubspec.yml中加入...
图标：svg图片转字体图标
02-04
异象isui组件库的高级图标字体。 由设计。 它们是免费使用的，并根据许可。 我们打算将此图标包与一起使用，但绝不仅限。 无论您是个人还是商业用户，都可以在合适的地方使用它们。安装npm install isui-iconfont --...
详解mpvue小程序中怎么引入iconfont字体图标
12-03
ps:添加到项目很有用，可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等，此处我们选择加入项目并下载代码 文件解压 一般网页中为了兼容性考虑，我们会留下css/ttf/svg/woff/eot文件，小程序中则有自己的...
iconfont字体库图片查看工具
01-27
开发过程中为了减少android 的app体积，对色调单一的图片可以使用iconfont代替，通过工具查看iconfont的代号，方便在代码中使用，通过工具也可以修改字体库的代号。
Vue3巧用iconfont字体图标库（建议收藏）
最新发布
爱勇宝
02-05 1213
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
iconfont引入没有svg文件
A4006的博客
12-30 868
1. 先去矢量库添加自己项目需要的图标 2. 然后下载至本地 3. 之后就会有压缩包，下载好包后这几个文件引入到项目库中 但有个问题 ：假如建项目的时候没有选中svg、eot那么下载的包里也不会有这些文件，就需要去项目里添加这些 把自己需要的勾选上就ok了 ...
项目中引用自定义 iconfont字体库
MingleHDU的博客
07-05 768
项目中引用自定义 iconfont字体库 前期准备 字体源文件下载 进入“我参与的项目”，下载项目 拷贝至项目src/assets/iconfont 拷贝到该路径下后，将iconfont.css文件命名成自身项目名，如evaluiconfont.css。 将除去demo的其他文件拷贝到项目。 字体命名 为防止与 iconfont官方字体库冲突，需为自身项目字体设置新的字体名。 在evalui...
项目中的icon中的svg点击变颜色，下载的iconfont的svg不变颜色
m0_66039084的博客
01-04 338
项目的菜单栏使用icon，项目中的icon中的svg点击变颜色，下载的iconfont的svg点击不变颜色
阿里字体图标库iconfont的使用详解
qq_46234563的博客
03-21 3258
阿里字体图标库iconfont的使用详解
iconfont怎么用,4000个iconfont字体图标库使用教程
jfh389987366的博客
03-09 1362
转载自：http://www.tpyyes.com/a/html5/2017/1012/277.html
iconfont 中图标以及字体库在页面中的引用
weixin_50450473的博客
10-20 1139
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~B、将设计里的图标或者iconfont里的图标，以 svg 的格式，并且不同的命名，添加或上传到该项目里。font-family: 自定义名字。A、根据项目不同创建不同的项目。4、在需要的页面中调用。
《前端》阿里字体库iconfont使用方法
BelleDiao的博客
01-31 1626
1、到阿里字体库网站中，登录账号。http://www.iconfont.cn/ 我的账号是我的126邮箱。 2、在图标库中查找自己需要的图标，并加入购物车，添加至项目中。最后下载到本地。 3、如何将想用的图标应用在html网页中？ 下图为下载的阿里图标。 首先将iconfont.css文件引入到html中（注意路径）： <link re...
怎么通过vscode去使用iconfont里面的字体图标
05-17
要在 VSCode 中使用 Iconfont 的字体图标，需要先通过 Iconfont 官网下载相应的字体文件。然后，将字体文件保存到项目中的某个目录下，例如 `src/fonts`。 接下来，在样式文件中引入字体文件，例如： ```css @font...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丘壑™

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值