阿里巴巴矢量图标库的使用

最新推荐文章于 2024-07-16 20:59:24 发布
最新推荐文章于 2024-07-16 20:59:24 发布
阅读量419 收藏
点赞数
分类专栏： 前端小基础 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42026631/article/details/106784105
版权

1、创建项目

2、把想要的图标添加进库

在这里插入图片描述
在这里插入图片描述

3、添加至项目在这里插入图片描述

4、选择font class

在这里插入图片描述
且复杂代码到对应html文件中引入css

<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1887330_jnnjgj5e8qk.css"/>

在对应的标签上引入

<i class="icon-RectangleCopy iconfont">		
注意iconfont必须添加
godchicken
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里巴巴矢量图标库使用
weixin_68658847的博客
07-03 830
阿里巴巴矢量图标库使用
copy_alibaba:一键复制阿里巴巴矢量图标库SVG图标，无需下载
05-11
一键复制阿里巴巴矢量图标库SVG图标，无需下载 阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。 苦于每次想要使用图标库 的图标都需要下载图标===拉到文件夹====写文件路径/...
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标如何使用有一个demo
iconfont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
记录和分享属于我的“IT”时光
04-11 6805
confont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。
iconfont-阿里巴巴矢量图标库使用教程
张时贰的博客
12-27 1万+
iconfont-阿里巴巴矢量图标库使用教程 文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果 一、前言 iconfont-阿里巴巴矢量图标库 矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点： 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要
iconfont阿里巴巴矢量图标库使用步骤
wangshuai13383347132的博客
11-02 537
iconfont阿里巴巴矢量图标库使用步骤 1.注册账号 2.选中图标，添加到购物车 点击购物车，将图标添加到项目 3.在我的项目中，点击下载至本地 4.解压download.zip压缩包，并将解压出来的文件名改成font 5. ...
阿里巴巴矢量图标如何使用
夏日漱石的博客
07-23 924
阿里巴巴矢量图标如何使用
阿里巴巴矢量图标的使用
qq_63605696的博客
11-22 4853
阿里巴巴图标本质就是字体，使用方法分为两种，一种是本地下载字体使用，另一种是在线链接使用。我已经建好一个名为测试的项目了，没有的新建一个就好。中的字体文件和网页放在同一个文件夹中。找到自己想要的图标添加到购物车。3.本地创建好网页，将下载的。查看项目仓库里面的图标。
vue 使用 iconfont-阿里巴巴矢量图标库
一心只想敲好代码
02-26 349
vue 使用 iconfont-阿里巴巴矢量图标库
阿里巴巴矢量库iconfont使用方法大全
最新发布
weixin_55688821的博客
07-16 548
进入官网，打开你喜欢的任意素材库，将你喜欢的图标加入购物车。选完了就点右边的购物车。我们可以看到右下角有三个选项。第一个就是把这些矢量图直接加到自己的项目当中；第二个是直接把矢量图下载下来，不过此时下载下来的也就是图片了，不再是字体；第三种是直接下载文件。你可以选择添加至项目，右上角添加项目名称确定即可。然后我们可以看到这个页面，无论是Unicode还是Font class还是Symbol下载到本地的文件都是一样，也就是前面讲的直接下载的文件。区别是引入方式的不同。
阿里巴巴矢量图标库使用步骤
热门推荐
小瑾沐晚风的博客
01-18 1万+
1.登陆官网，选择需要的图标，将其添加至项目，然后下载至本地。 2.解压文件。 3.在工程目录下新建CSS文件夹，在CSS文件夹之后新建iconfont文件夹，并且将下面四个文件复制在CSS/iconfont文件夹之下。   4.将下载的图标文件中的iconfont.css复制到CSS文件夹之下，与iconfont文件夹在同一层。 5.至此，目录如下： 6.双击打开icon...
阿里巴巴矢量图标批量下载 IconontDownload.js
09-04
如何批量下载阿里巴巴矢量图标库的图标？ 1.打开阿里巴巴矢量图标库的项目；2.按F12打开浏览器的开发者工具，复制并执行自动下载图标的代码。
CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
11-21
进入阿里巴巴矢量图标库 阿里巴巴矢量图标库 选择喜欢的图标的，点击添加到库 选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录） 然后在右侧中点击添加至项目 之后在个人主页中可以...
阿里巴巴 矢量图 流程图 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使用示例，便做了一个简单的示例给大家参考。
如何使用阿里巴巴矢量图标库
weixin_72392153的博客
10-30 155
阿里巴巴矢量图标库快速上手
阿里矢量图标库
04-26
阿里矢量图标库是阿里巴巴设计团队推出的一款强大的在线图标资源平台，它集合了大量的高质量、可缩放的矢量图标，广泛应用于网页设计、移动应用、软件开发等多个领域。这款图标库以其丰富的图标种类、易用的搜索功能...
拟态化可自定义主页，图标来自阿里巴巴矢量图标库
02-01
"拟态化可自定义主页，图标来自阿里巴巴矢量图标库" 这个主题涉及到的核心技术主要包括HTML、CSS以及矢量图标的使用，特别是如何利用阿里巴巴矢量图标库来提升网页设计的质量和灵活性。 首先，我们来看HTML...
微信小程序引用阿里巴巴矢量图标.zip
09-04
通过以上步骤，就可以在微信小程序中成功引用并使用阿里巴巴矢量图标库了。这种方法不仅可以实现图标颜色、大小的自定义，还可以轻松地进行动态图标切换，为微信小程序带来更丰富的视觉体验。需要注意的是，在实际...
使用 阿里巴巴矢量图标库
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类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值