iconfont在项目中的使用方式

17 篇文章 0 订阅

iconfont是一个阿里的图标库

1、地址: https://www.iconfont.cn

2、注册登录后选择‘我的项目’,并创建我的项目

3、选择需要的图标并加入购物车,选择购物车把购物车内的图标加入项目文件夹中

4、点击下载至本地,会获得如下文件夹和文件。

5、下面这一排文件有用,上面3个没有用。

6、在项目中新建一个iconfont文件夹,将下面这6个文件放入文件夹中,打开css文件,给非data的url加上相对路径,更加稳妥。

7、按照说明文档引入项目,说明文档为上述文件夹中的demo_index.html。

引入方法为:

<span class="iconfont">&#xe636;</span>

中间的字符串在demo_index.html说明文档中可以找到,他对应相应的icon。

要将 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、付费专栏及课程。

余额充值