iconfont如何通过文件的方式引入项目

最新推荐文章于 2024-06-17 17:09:00 发布
最新推荐文章于 2024-06-17 17:09:00 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： CSS vue 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rainbow8300/article/details/122220682
版权
vue 同时被 2 个专栏收录
25 篇文章 0 订阅
订阅专栏
CSS
2 篇文章 0 订阅
订阅专栏

第一步 在 阿里巴巴的矢量图库中创建项目

1、在iconfont首页，点击顶部菜单栏【资源管理】下的【我的项目】，点击右侧【新建按钮】，输入信息后，点击【新建】
在这里插入图片描述
在这里插入图片描述
2、 给自己项目中加入图标
在这里插入图片描述在这里插入图片描述
3、点击【查看在线链接】拷贝项目下面生成的fontclass代码：
在这里插入图片描述

第二步 就可以在项目里引用该链接即可

在这里插入图片描述
项目引入链接后，挑选相应图标并获取类名，应用于页面即可

rainbow8300
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目引入Iconfont图标库的教程图解
10-17
在修改完`iconfont.css`后，你需要在项目的主入口文件`main.js`中引入它。这样，整个项目就能全局使用这些图标，而无需在每个组件中单独导入。 最后，在Vue组件中使用新下载的图标，你可以像这样编写HTML代码： ```...
分享2个ICON资源链接
u011186532的专栏
08-25 2685
分享2个实用的ICON资源链接
iconfont技术分享
01-29 301
提需求的人图标样式(颜色)要换？ 图标如何满足不同的分辨率以及清晰度？ 图标太多导致项目体积越来越大，如何瘦身？ 按钮状态切换只用一个图标，例如点击和松开，甚至更多的状态？ 用字体来代替图标 阿里iconfont 轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离...
iconfont的使用（超简单）
风也温柔☆的博客
06-17 606
iconfont是阿里打造的矢量图标管理、交流平台，设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。我们可以新建一个项目然后把要使用的图标都放到这个库中方便查看使用。项目创建后，我们搜索要使用的图标，然后加入到新创建的项目中。我们可以在项目中查看到所添加的图标。symbol方式 画一个文件夹。解压至文件夹iconfont中。阿里iconfont图标库。
iconfont的基本使用
Celester_best的博客
11-29 898
阿里巴巴的iconfont网站有很多小图标可供我们使用，链接如下iconfont网站链接。 这个图标资源库可以一个图片一个图片的下载，也支持批量下载。下面我来介绍下批量下载。 进入网页之后，可以选择自己需要的小图标，将鼠标移动到小图标上之后，就会出现如下所示的3个按钮。 这3个按钮分别是添加到购物车、收藏、下载的按钮。如果需要批量下载图片，我们可以先添加到购物车。 加入购物车之后，点击购物车按钮就会在右侧出现一个弹框。 点击添加到项目（添加到项目，可以根据自己的需要设置下载哪些选项）
手把手教你 iconfont 导入使用及相关配置
Brod-Roy的博客
12-12 9107
iconfont是阿里旗下的一套图标库，UI设计师设计号图标后，会将图标上传到iconfont的项目库中。前端开发人员需要下载项目图标，并在项目中使用。
如何添加Iconfont图标到项目及创建新项目？
Sun_小杰杰哇
10-28 4013
1、搜索图标 或者 选择自己上传图标。 2、 选择图标，加入库。 3、点击购物车图标，如果已经创建项目直接选择点击确定；如果没有创建项目点击+创建项目。 4、输入新项目名称，点击确定。 5、 确定后进入“我的项目”页面，里面有添加的图标。 6、图标添加完成，可以选择使用Unicode、Font class、Symbol三种方式引入图标。第一次创建无代码生成，点击生成代码，复制代码到项目，引入即可使用。 ...
iconfont的三种使用方式详解
10-18
iconfont在网页设计与开发中扮演着重要的角色，它允许开发者通过引入字体图标资源来展示各种图形和符号，而不需要依赖传统的图片文件，这不仅提高了网页的加载效率，还增强了网站的可维护性。 描述中提到，文章的...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue CLI项目中，我们通常会将`iconfont`的CSS样式和字体文件引入到项目中。然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法...
react项目如何使用iconfont的方法步骤
10-17
总结来说，React项目中使用iconfont主要分为准备font文件和配置、创建图标组件、可能的less样式配置，以及实际使用图标组件四个步骤。这样操作不仅提高了图标的可复用性，还保持了代码的清晰与组织性。如果项目中...
vue项目使用iconfont的最佳实践
08-12
Iconfont，又称图标字体，是一种将矢量图标转化为Web字体的方式，它允许开发者通过CSS样式来控制图标的大小、颜色和动画效果，同时具有加载速度快、可自适应分辨率等优点。以下是对“vue项目使用iconfont的最佳实践...
如何制作WEB项目的Iconfont
01-21
使用Adobe Photoshop和Illustrator软件，并借助IcoMoon国外网站与阿里巴巴矢量图标库国内网站来制作Iconfont，让你的网站更加个性化……
详解mpvue小程序中怎么引入iconfont字体图标
10-17
3. 如果你的项目使用了CSS预处理器如SCSS，引入和使用图标的方法基本相同，只是将iconfont.css替换为对应的预处理文件格式，并在相应的预处理文件中引入。 4. 在遇到问题或流程不清晰时，记得查阅官方文档或向社区...
在vue项目中正确使用iconfont的方法
12-29
4、把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下（可创建一个css文件或iconfont文件） 5、在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css' 6、在在vue文件中...
iconfont图标字体的六种使用方式
最新发布
07-21
- **引用图标：** 在解压后的文件夹中找到CSS文件和字体文件，通过在HTML文件中引入相应的CSS文件来使用图标。 **示例代码：** ```html <link rel="stylesheet" href="path/to/iconfont.css"> <i class="iconfont...
web前端 使用iconfont阿里巴巴线上矢量图标
细节怪的博客
09-29 2463
web前端，vue使用在线iconfont阿里巴巴图标，从创建项目到页面引用
阿里矢量图库 iconfont 引入项目使用方法
my_batis的博客
04-27 3292
1.打开阿里巴巴矢量图标库官网https://www.iconfont.cn/login? 注册或登录 2.搜索自己想要的所有图标，添加入库； 3.新建项目，添加所有图标至项目中； 3.1.打开自己的购物车 3.2.新建项目 不要直接下载代码，或缺少所需文件 4.创建完成自动跳转至项目页面，下载至本地即可，解压后将所有文件放入项目的同一文件夹中； 解压之后的文件 放入项目同一文件目录下 5.项目中引入即可 #引入css样式 <link rel="stylesheet" type="
引入并使用iconfont
yml15180824993的博客
11-05 7587
各框架如何引入并使用iconfont（未完）一、uniapp 一、uniapp 1、进入iconfont，登录，搜索项目需要的图标，将它加到购物车。 2、点击用户头像旁边的购物车，添加至项目，项目名称高兴就好，然后将代码下载到本地。 3、将下载下来的图标解压后选取css文件和字体图标文件。 4、在uniapp的static文件下新建一个font文件夹，然后将css文件和字体图标文件丢进去。 5、修改iconfont.css文件，用字体图标文件直接替换下面的这三个url。 6、在App.vue中
uniapp项目引入iconfont
09-05
3. 在iconfont文件中，包含了iconfont.ttf和iconfont.css两个文件。需要将iconfont.ttf文件转换成base64格式。你可以使用一个转换工具，例如https://www.giftofspeed.com/base64-encoder/来进行转换。 通过以上步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值