iconfont阿里巴巴矢量图标库本地下载的使用

最新推荐文章于 2025-02-26 16:40:00 发布
最新推荐文章于 2025-02-26 16:40:00 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： 组件和图表 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46322755/article/details/125471097
版权

今天使用iconfont应用在vue3项目发现不能在线链接使用，无耐只能下载到本地了。

  1. 选取需要的图标添加入库（小小车车变红就可以），然后添加到项目，然后就是下载啦。我这里使用的是unicode
    在这里插入图片描述
  2. 下载好后解压，把图片中选中的文件复制到项目里
    在这里插入图片描述
  3. css文件放在css文件夹，其他放在同一个文件夹，css跟其它的不在同一个路径，所以修改一下css文件下@font-face里对应路径
    在这里插入图片描述
  4. 在main.js引入iconfont.css

一开始是在index.html里引入，结果只出现了个方框，只需要在入口文件main.js文件里引入就好了

在这里插入图片描述
6. 挑选相应图标并获取字体编码，应用于页面

  <i class="iconfont">&#xe651;</i>
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 2282
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
如何将阿里巴巴矢量图标库iconfont引入到vue项目中？
日常分享工作中的一些技术干货。
12-25 1040
当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？想了解更多的微服务架构实践吗？关注公众号【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。
css_iconfont
01-06
css_iconfont css_iconfont用法
阿里图标库的使用
qrsgcs9091的博客
09-08 1078
css
本地使用iconfont图标
最新发布
win2201的博客
02-26 382
把iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2添加到刚才在代码创建的文件夹内。注意：iconfont这个class类必须有，别漏了。进入我的项目后，点击新建项目；把购物车里添加的图标添加到刚才创建的项目；添加好后就能在我的项目中看到。进入iconfont官网后，找到资源管理内的我的项目。创建好之后就能在我发起的项目一栏看到你所创建的项目了。第四步：在你的代码中创建一个文件夹，可以在静态文件目录下创建。搜索自己想要的图标，点击添加入库按钮。
iconfont下载到本地使用教程
q1054007919的博客
07-13 2782
iconfont下载到本地使用教程
Vue中下载iconfont到本地使用
zzzzzzzi111的博客
08-30 905
Vue中下载iconfont到本地使用
使用阿里巴巴的iconfont图片库（下载到本地）
开发路上的AZhe
09-11 3285
1.登录，选择喜欢的图标加入购物车 2.添加至项目 3.修改项目设置 保存之后：下载至本地->解压 代码使用 <icon class="iconfont icon-caidan"></icon> 效果图：
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
Iconfont阿里巴巴矢量库图标使用教程
chujian0325的博客
10-13 1213
Iconfont阿里巴巴矢量库图标使用教程 阿里巴巴矢量库图标官网https://www.iconfont.cn/ 1. 注册、登录 2. 搜索图标 3. 把图标加入购物车 4. 点击购物车，可以看到已经选好的图标，选择“下载代码” 5. 解压下载的文件，可以看到如下文件 6. 在iconfont.json文件中自定义font_class 7. 在iconfont.css文件中同步修改类名 8. 在HTML文件中调用class类名iconiconfont和icon.
iconfont阿里巴巴矢量图转base64资源包
07-27
这个"iconfont阿里巴巴矢量图转base64资源包"提供了将矢量图标转换为Base64编码的能力，从而优化了网页加载速度和资源管理。 首先，我们来了解一下什么是Iconfont。Iconfont，也被称为“字体图标”，是一种将图标...
iconfont.css免费给大家了
03-25
一些文字代码
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
qq_46103732的博客
11-24 4767
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
阿里巴巴图标库的使用
m0_37751401的博客
11-15 3011
阿里巴巴图标库两种使用方式
【阿里图标库的使用】
qq_64831425的博客
11-02 1110
阿里图标库的使用，只有 使用 本地下载的方法，使用网络链接请观看其他文章
iconfont下载至本地，项目中怎么使用
m0_69538493的博客
08-22 384
步驟一：把需要使用的 iconfont 项目 下载到本地下载后得到压缩包、解压后得到 以下文件。
微信小程序引入下载至本地的iconfont图标
Quentin0823的博客
07-06 4839
第一步选好自己要用的icon图标并下载至本地 下载后得到这样目录的文件 第二步 转换成base64 网址：https://transfonter.org/ 选择后缀为.ttf的文件 第三步：下载成功后，得到一个名为 “transfonter.org” 开头的压缩包，解压后得到三个文件，打开其中 “stylesheet.css” 文件第四步：在小程序目录新建放置图标资源的文件这是我自己的一个目录，可以看到在iconfont.wxss中，如果是直接复制文件的话，记得把后缀css改成wxss 把@font-fac
小程序-滑块+iconfont下载本地使用
qq_20623665的博客
02-13 248
direction 属性movable-view的移动方向，属性值有all、vertical、horizontal、none。由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图。movable-area 必须设置 width 和height属性，不设置默认为10px。movable-view 默认为绝对定位，top和 left 属性为0px。阿里巴巴矢量图标库下载的包---请面提及让留意的css文件。组件中，并且必须是直接子节点，否则不能移动。
使用curl命令批量下载阿里矢量图标iconfont，再也不用覆盖重新下载了
weixin_45929883的博客
05-24 1014
curl是一个利用URL在命令行工作的文件传输工具，并不是所有的linux系统中都会自带curl命令，例如简洁版的Linux系统就可能并不存在，只需通过执行“yum install curl”命令安装即可；iconfont矢量图标使用不知道各位前端有没有这样的困扰：每一次更新iconfont都需要下载整个文件压缩然后去覆盖原文件，最后再删掉一些不需要的文件；这个过程虽然也不是很麻烦，但是就像是搬砖一样很枯燥；
阿里巴巴矢量图标库iconfont使用
02-21
### 如何使用阿里巴巴 Iconfont 矢量图标库 #### 注册与登录 为了能够充分利用 Alibaba 的 Iconfont 图标库，用户需先访问官方网站 https://www.iconfont.cn/ 并完成账号注册流程[^3]。 #### 创建项目并添加图标 成功登录后，在个人中心创建一个新的项目。之后可以从网站提供的大量免费图标中挑选所需，并加入到该项目内。对于特定需求，还可以上传自定义SVG文件来扩展可用资源集合[^1]。 #### 下载字体包或在线引用 当所有必要的图标都已选好时，可以选择下载整个项目的离线版本作为 WebFont 字体形式用于本地开发环境；另一种方式则是通过获取线上链接直接嵌入HTML页面头部标签里实现即时加载显示效果[^2]。 #### HTML 中引入图标 无论是采用哪种方法获得的图标引用地址，最终都需要将其正确地写入网页源码之中以便浏览器解析渲染： 如果选择了 **WebFont 方案** ，则只需复制给出的一段 `<link>` 和 `<style>` 代码片段粘贴至目标站点模板相应位置即可生效； 而针对个别场景下可能更倾向于单独调用某几个常用图形的情况，则建议利用 `@font-face` 定义规则配合 CSS 类名的方式灵活控制展示逻辑。 ```html <!-- 引入阿里巴吧Iconfont --> <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css"> <i class="iconfont"></i> ``` #### JavaScript 动态操作 (可选) 除了静态声明外，有时也希望能借助脚本动态改变界面中的某些部分所使用的具体图案。此时可以考虑结合 jQuery 或者原生 DOM API 来达到目的。下面是一个简单的例子展示了如何切换按钮上的不同状态对应的图标。 ```javascript // 利用jQuery更改类名从而更换图标 $('#myButton').click(function(){ $(this).toggleClass('active'); }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值