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

最新推荐文章于 2024-03-06 15:28:09 发布
最新推荐文章于 2024-03-06 15:28:09 发布
阅读量1.4k 收藏
点赞数 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>
一休、 り
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
iconfont.css免费给大家了
03-25
一些文字代码
CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
11-21
进入阿里巴巴矢量图标库 阿里巴巴矢量图标库 选择喜欢的图标的，点击添加到库 选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录） 然后在右侧中点击添加至项目 之后在个人主页中可以...
在线制作ico图标 ico图标转换工具和图标网站
HIRAETHZY的博客
11-11 625
https://www.bitbug.net/ 可将图片转换成ico图标
阿里云矢量图标库 Iconfont 使用帮助
OliverMGB的博客
10-23 1817
阿里云矢量图标库 Iconfont 使用帮助
字体图标iconfont的下载和使用方法
最新发布
zyh0815的博客
03-06 509
字体图标常应用于网页中常见的小图标，本文仅简单介绍了iconfont的下载和使用。
阿里巴巴矢量图标库使用步骤
热门推荐
小瑾沐晚风的博客
01-18 1万+
1.登陆官网，选择需要的图标，将其添加至项目，然后下载至本地。 2.解压文件。 3.在工程目录下新建CSS文件夹，在CSS文件夹之后新建iconfont文件夹，并且将下面四个文件复制在CSS/iconfont文件夹之下。   4.将下载的图标文件中的iconfont.css复制到CSS文件夹之下，与iconfont文件夹在同一层。 5.至此，目录如下： 6.双击打开icon...
Android studio 使用阿里巴巴图标矢量图库
wei的博客
09-02 1537
这么好用的阿里巴巴图标矢量图库你还不快安排上吗？
阿里巴巴矢量图库，图标导入的简单使用
牢骚太盛防肠断，风物长宜放眼量
10-01 1646
文章目录引言===正文开始===下载素材1.第一步添加素材2.将购物车中iocn添加到项目中3.下载项目使用素材1.文件解压缩2.将解压后的文件拉入自己的网页项目中3.如何使用4.简单修改颜色大小 引言 这个东西刚学用起来比较奇怪，刚刚搞了一下【Unicode】这一栏的引用方式 感觉还是很简单的，但是他自带的那个文档描述一言难尽，我是真的看的一脸懵逼， 就是下图这个介绍，真的是搞人心态，我还是翻了以前的才找到咋写的 =正文开始= 下载素材 1.第一步添加素材 看到这个小购物车了吗，喜欢啥icon就点一
iconfont下载到本地使用教程
q1054007919的博客
07-13 2421
iconfont下载到本地使用教程
怎样在线生成ICO 图标？图片怎么转ICO图标？
viv426的博客
11-17 997
相信很多小伙伴的电脑上都会保存一些好看个性的图片，图片除了可以变成GIF动图，还可以把这些图片转换成一个个专属的ICO图标，方便我们的使用，怎么将图片转换成图标来使用呢？这就需要先把图片转成ICO格式图片，小编这就给大家分享一款在线图片转ICO（https://www.yasuotu.com/ico）的转换工具，具体步骤大家一起来看看吧！希望给小伙伴乏味的工作带来一丝乐趣。 一、打开压缩图网站，在导航栏选择图片转ico功能，点击选择文件进行图片上传。 二、点击选择文件上传图片（注意：原图宽高不一致时选
iconfont字体图标下载及使用方法
qq_42724424的博客
02-12 8078
一、下载方法 1.打开阿里iconfont，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 2.选择font class，点击下载至本地 3下载后的文件应包括以下几项 4.将打钩的文件保存至一个文件夹中，注意，这里如果缺少文件，需要从“项目中”的项目设置修改设置 二、使用方法 1.将iconfont放入css文件夹中，将其余文件放入一个文件夹中，注意，iconfont.css文件夹中的路径要与其余文件的路径对应：如下图： 2.在引入字体图标的时候，需加两个类名，一个是默认的ic
阿里矢量图库&icomoon的icon引用方法
qq_41246394的博客
05-15 1145
啦啦啦啦啦
阿里巴巴 矢量图 流程图 json 格式
08-17
https://www.iconfont.cn/ 阿里巴巴 矢量图 https://app.diagrams.net/ 流程图 https://tool.jisuapi.com/json.html json 格式
阿里矢量图标库WPF使用Demo
12-27
iconfont_阿里矢量图标库WPF使用Demo，我发现网上没有详细的WPF使用示例，便做了一个简单的示例给大家参考。
微信小程序引用阿里巴巴矢量图标.zip
09-04
微信小程序引用阿里巴巴矢量图标库，单个矢量图标引入
vue和小程序项目中使用iconfont的方法
01-19
1、百度搜索iconfont或者阿里巴巴矢量图标库官网，注册登录； 2、找到图标管理->新建项目，或者使用已有的项目，用于保存自己的图标； 3、搜索自己需要的icon； 4、添加到购物车中； 5、购物车中就有了相应...
iconfont-阿里巴巴矢量图标库使用教程
张时贰的博客
12-27 1万+
iconfont-阿里巴巴矢量图标库使用教程 文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果 一、前言 iconfont-阿里巴巴矢量图标库 矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点： 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要
阿里矢量图iconfont的使用方法
Cheny_Yang的博客
11-13 6771
阿里矢量图iconfont的使用方法 一般那些小的图标都是用矢量图来表示的，然后就能像操作字体的方法一样操作这些小图标了，很是方便。比较常用的是阿里提供的一些矢量图标，基本上所有的图标都涵盖了。 链接地址：阿里矢量图标标库 方法1，在线引用 （一般是项目未完成时，用这种方法，好处是当想要增加新的图表时，只需要改变连接就行了，无需重新下载一遍） （1）先登录 （2）随便选一个你喜欢的图标库，比如 ...
iconfont-阿里巴巴矢量图标库使用js方式更更改不了图标颜色解决方法
FUFCY的博客
03-02 536
给使用的ioc组件加个类名，然后在类名样式里加 fill:red(想要的样式）
使用 阿里巴巴矢量图标库
08-13
要在Uni-app中使用阿里巴巴矢量图标库，可以按照以下步骤进行： 1. 注册并登录阿里巴巴矢量图标库（https://www.iconfont.cn/）的账号。 2. 在阿里巴巴矢量图标库中搜索需要的图标，选择并添加到自己的项目中。 3. 在项目中创建一个字体图标库文件夹，将从阿里巴巴矢量图标库下载的字体文件（通常是.ttf或.otf格式）放入该文件夹中。 4. 在项目的`index.html`文件中，通过`<style>`标签引入字体图标库，并设置其`font-family`属性。例如： ```html <style> @font-face { font-family: 'iconfont'; src: url('path/to/iconfont.ttf') format('truetype'); } </style> ``` 5. 在需要使用字体图标的地方，使用`<text>`或其他合适的组件，并设置`class`属性为图标对应的类名。例如： ```html <text class="iconfont icon"></text> ``` 在上面的代码中，`iconfont` 是字体图标库的类名，`` 是具体的图标字符码点。 6. 根据需要设置图标的样式，如颜色、大小等。可以通过内联样式或CSS类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值