iconfont阿里巴巴矢量图标库怎么使用（下载代码001——最简易基础版）

最新推荐文章于 2024-03-06 15:28:09 发布
原创 最新推荐文章于 2024-03-06 15:28:09 发布 · 1.5k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #前端
本文介绍了通过阿里巴巴矢量图标库下载并使用图标的步骤：搜索图标，添加到购物车，创建项目，下载到本地，将iconfont.css引入项目。在微信小程序开发中，需将css文件改为wxss。
  1. 登录官网

https://www.iconfont.cn/

  1. 下载

① 可切换中英文 【中 / En / Pinyin】
② 搜索 search （你要啥 就搜啥）在这里插入图片描述

③ 添加到购物车（下载图标的步骤）
在这里插入图片描述
④ 点击右下角的购物车
在这里插入图片描述
⑤ 点击 添加到项目
⑥ 下载 到本地
在这里插入图片描述
此文件夹放在项目中, 引入iconfont.css文件

⑦ 解压缩文件夹
在这里插入图片描述
⑦ 得到此文件夹（个人习惯性把此文件名改为 “iconfont” ）
在这里插入图片描述

  1. 使用

① 把文件放到项目文件夹中，引入css
<link rel="stylesheet" href="./iconfont/iconfont.css">
注意：若是微信小程序开发，需把 iconfont.css 改为 iconfont.wxss。 iconfont.css为web开发使用。(小程序还有其他细节…)

② 使用图标
<i class="iconfont icon-shanchu"></i>
在这里插入图片描述

Henry13133333
关注
iconfont.css免费给大家了
03-25
一些文字代码
478个iconfont图标
08-20
四百来个icon图标，提取出来可根据类名来设置，其中的类名都已经在页面上展示出来，很容易引用，希望帮到大家
Iconfont 图标大全 样式和代码对齐
一如既往
07-19 2662
Iconfont所有图标 下面为最新版本所有内置图标以及其class 为了对齐图标要了我的老命。。。总算是舒服了 | ------------- | ------------- | ------------- | | icon-aria-close | icon-aria-archlinux | icon-aria-search| | icon-aria-mac | icon-aria-os | icon-aria-friends| | icon-aria-twitte
Iconfont使用的三种方式
YMX2020的博客
06-17 1714
Iconfont使用的三种方式 ​ 作为一个前端开发，项目中用矢量图标是家常便饭，最近笔者项目中正好有使用，所以就抽空总结了一下阿里图标库的三种使用方法（笔者项目中用到的是Symbol 引用方式） 矢量图标库使用步骤如下： 首先需要登录阿里矢量图标库 ​ 阿里矢量图标库：https://www.iconfont.cn/ 挑选你需要的矢量图标并加入购物车 点击步骤1把心仪的图标加入购物车 加入完毕后，点击步骤2 准备下载你选好的图标代码 点击步骤3所示的下载代码按钮，把你选好的图标的实
iconfont字体图标下载及使用方法
qq_42724424的博客
02-12 9164
一、下载方法 1.打开阿里iconfont，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 2.选择font class，点击下载至本地 3下载后的文件应包括以下几项 4.将打钩的文件保存至一个文件夹中，注意，这里如果缺少文件，需要从“项目中”的项目设置修改设置 二、使用方法 1.将iconfont放入css文件夹中，将其余文件放入一个文件夹中，注意，iconfont.css文件夹中的路径要与其余文件的路径对应：如下图： 2.在引入字体图标的时候，需加两个类名，一个是默认的ic
CSS 字体图标下载与引用
YFxiaogui的博客
08-16 1026
iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。打开icomoon字库官网，点击右上角IcoMoon APP 按钮。iconfont-阿里巴巴矢量图标库。
vue使用外部字体
weixin_39150852的博客
06-10 1602
1、下载字体包 链接：https://pan.baidu.com/s/1QS7Ra9-Nr6B0SSqUEa5Q9Q 提取码：swvz 2、css中引入字体 @font-face { font-family: myFont; src: url("../common/font/DS-DIGI.TTF"); } 3、直接使用 span { ...
iconfont-阿里巴巴矢量图标库使用教程
张时贰的博客
12-27 1万+
iconfont-阿里巴巴矢量图标库使用教程 文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果 一、前言 iconfont-阿里巴巴矢量图标库 矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点： 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要
IconFont字体图标的下载与使用
wingchiehpih的博客
05-01 2万+
如何在Iconfont下载字体图标如何在IconFont-阿里巴巴矢量图标库下载字体图标IconFont1、首先打开官方网址2、登录相关账号3、添加需要的图标入库4、添加到项目5、新建项目6、下载到本地7、下期预告 如何在IconFont-阿里巴巴矢量图标库下载字体图标 IconFont IconFont，图标字体也叫字体图标，就是字体做的图标。可以通过设置字体的方式改变图标的样式，受到近些年 扁...
阿里巴巴矢量图标库的使用，超详细用法
热门推荐
piaoliangj的博客
10-10 4万+
阿里巴巴矢量图标库在页面中的使用 官网地址： iconfont 阿里巴巴矢量图标库 登录 在页面中选择喜欢图标库点进 鼠标悬停想要的图标 选择添加入库 入库成功后 本图标会有一个虚线框 右上角的库图标会有个数的小红点 点击购物车图标 选择添加至项目（如果没有就创建一个） 确定 就会跳转到我的项目页面 选择图标 添加入库 选择 Font class 点击下载至本地 下载完成后，打开压缩包，只解压一个iconfont.css文件到页面要用到的css包里 然后开始在代码中操作 在head中导入
阿里巴巴矢量图标库-iconfont使用方式
Rosen的博客
09-10 4050
阿里巴巴矢量图标库-iconfont使用方式 在项目开发的过程中，我们经常会使用到图标进行页面的修饰。如果使用图片，往往会遇到失真的情况，而且图片数量很多的话，页面加载也会变得很慢。所以，我们可以使用字体图标的方式来展示图标，即解决了失真的问题，也解决了图片占用资源的问题。 本篇blog主要介绍目前主流图标使用方式-iconfont的使用，话不多说，上干粮。（如有问题，欢迎指出。） 阿里官网传送门 打开首页，会发现很有有趣而且实用的图标，看得人眼花撩人哈哈哈~~ 选择自己想要的图片，添加至购物车 一、下
iconfont字体图标下载
m0_54088431的博客
07-24 1946
把鼠标放在图标上面，就会显示购物车，点击加入购物车即可此时就会有一个压缩包下载了，解压到当前文件夹，可以将文件名个名字这里面点击FontClass就可以使用图标的类名了（下面那一行）同时这个页面也有使用步骤。一定是，否则会显示不了iconfont.css。...
vue前台错误
lyu12345的博客
10-17 1030
TypeError: Cannot read property ‘validate’ of undefined 错误 TypeError: Cannot read property ‘validate’ of undefined <el-button type=“primary” @click=“addStock”>新增 method...
阿里图标库——批量下载图标
朝阳39的博客
09-26 3876
使用购物车实现批量下载 特别提醒：因官网批量下载数量限制，以下案例中都最多只能选择20个图标。 批量下载图标，需要先将图标添加入库【“购物车”】，再下载 选择颜色和大小，点击格式就会触发下载，推荐SVG 批量添加页面中的图标入库 方法1：手动选择需要的图标添加入库 方法2：运行代码批量添加入库 按F12打开控制台，运行代码 var iconList = document.querySelectorAll('.icon-gouwuche1'); for (var i = 0; i &.
字体图标iconfont的下载和使用方法
zyh0815的博客
03-06 4151
字体图标常应用于网页中常见的小图标，本文仅简单介绍了iconfont的下载和使用。
Vue中下载iconfont到本地使用
zzzzzzzi111的博客
08-30 1089
Vue中下载iconfont到本地使用
使用curl命令批量下载阿里矢量图标iconfont，再也不用覆盖重新下载了
weixin_45929883的博客
05-24 1197
curl是一个利用URL在命令行工作的文件传输工具，并不是所有的linux系统中都会自带curl命令，例如简洁版的Linux系统就可能并不存在，只需通过执行“yum install curl”命令安装即可；iconfont矢量图标使用不知道各位前端有没有这样的困扰：每一次更新iconfont都需要下载整个文件压缩然后去覆盖原文件，最后再删掉一些不需要的文件；这个过程虽然也不是很麻烦，但是就像是搬砖一样很枯燥；
字体图标的下载及使用
qq_46034942的博客
02-10 1307
字体图标的下载及使用
vue之iconfont图标使用（下载到本地）
seimeii的博客
10-11 711
第一步 下载之后解压 第二步 引入到项目中 在你的项目中引入iconfont.css文件 第三步 使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值