怎么将自己的图标上传到iconfont并在项目中使用

将自己的图标上传到iconfont并在项目中使用

第一步:进入iconfont官网,登录自己的账号

进入导航栏「图标管理」->「我的图标」
点击上传按钮
点击上传按钮:
在这里插入图片描述
选择想要上传的svg图标:
在这里插入图片描述
点击保留颜色并提交。

第二步:加入购物车并下载

单击选择图标加入购物车:
在这里插入图片描述
进入购物车,点击下载代码按钮,本地就会下载一个文件夹:在这里插入图片描述
在这里插入图片描述
把需要用的文件复制到项目中,一定要复制iconfont.css:
在这里插入图片描述
在页面引入iconfont.css文件,vue脚手架可以直接在main.js引入:
在这里插入图片描述
使用:
打开下载的文件夹中的html文件:
在这里插入图片描述
使用class方式来饮用:
在这里插入图片描述
在这里插入图片描述
ok,接下来就可以愉快玩耍了!

要将 Iconfont 下载到本地项目使用,你可以按照以下步骤进行操作: 1. 登录到 Iconfont 网站:首先,在浏览器中打开 Iconfont 网站(https://www.iconfont.cn/)登录你的账号。 2. 创建项目添加图标:在 Iconfont 中创建一个项目将你需要的图标添加到该项目中。你可以选择已有的图标库,也可以上传自定义的图标。 3. 选择图标添加到购物车:在项目中选择你需要的图标点击 "加入购物车" 按钮。 4. 下载图标:在购物车中,确认你要下载的图标点击 "生成代码" 按钮。 5. 选择下载方式:在 "生成代码" 对话框中,选择 "下载至本地" 选项,选择适合你项目的下载格式(如 Font Class、Symbol、Unicode 等)。 6. 下载文件:点击 "下载" 按钮来下载图标文件。通常会下载一个压缩文件(如 .zip 或 .tar.gz),解压缩后会包含相关的图标文件。 7. 将图标文件复制到项目中:将解压后的图标文件复制到你的项目目录中的一个合适的位置。通常,你可以将它们放在一个独立的目录(如 `src/assets/icons`)中。 8. 在项目使用图标:根据你选择的图标下载格式,可以使用不同的方式在项目使用图标。 - 对于 Font Class:将下载的字体文件(通常以 .ttf、.woff、.woff2 等格式)复制到你的项目目录中,在你的 CSS 文件中引入字体文件。然后,使用 CSS 类选择器来将图标应用到元素中。 - 对于 Symbol 或 Unicode:根据下载的图标文件中的文档说明,将对应的代码复制到你的项目中,在需要使用图标的地方插入相应的代码。 根据你具体的下载方式和图标格式,可能会有一些额外的步骤或配置。请参考 Iconfont 提供的文档和指南,以确保正确地使用下载的图标。如果有任何问题,请随时向我提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值