apicloud项目引入阿里巴巴矢量图标库

最新推荐文章于 2024-09-17 21:45:17 发布

dk2319193

最新推荐文章于 2024-09-17 21:45:17 发布

阅读量656

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/jcydd/p/11521833.html

版权

apicloud项目的前端页面我都是使用aui构建的，但是aui自带图标太少，有时需要从其他地方找合适的图标，阿里图标库就很好

地址：https://www.iconfont.cn/

首先登录后查找自己需要的图标加入购物车，点击购物车将图标加入我的项目，项目名称自己起，我这里加了四个图标做个例子，点击图标管理--我的项目就可以看到下图所示

然后下载到本地会获得一个压缩包，里面有下面这些文件

把红框里的文件放进apicloud项目中，我放在了css/ali-icon文件夹中，然后在项目中引入

<link rel="stylesheet" type="text/css" href="../css/ali-icon/iconfont.css"/>

图标如上图方式引入，引入效果如下图

图标大小有时候不合适，可以在iconfont.css样式中更改，默认16px有点小，我这里用的30px

转载于:https://www.cnblogs.com/jcydd/p/11521833.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dk2319193

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

如何在项目中使用阿里巴巴矢量图标

03-27

可以通过在线工具（如阿里巴巴矢量图标库网站）生成定制的CSS或JS，只包含项目所需图标。总的来说，使用阿里巴巴矢量图标需要以下步骤： 1. 引入`iconfont.css`和`iconfont.js`到HTML文件。 2. 在HTML元素中使用`...

1688平台API接口接入文档和参数说明调用示例

TinagirlAPI的博客

05-30

2571

在获取到access_token以后，就可以调用相应的API接口了。1688平台提供了开放API接口，可以方便地接入程序中，获取商品信息、订单信息以及进行交易等操作。授权以后，1688平台会重定向回调地址，返回授权码。2. 身份认证：通过OAuth 2.0协议进行身份认证，获取access_token。获取到授权码以后，可以通过授权码换取access_token。3. 调用API：根据具体需求，调用相应的API接口，获取所需数据。1. 创建应用：在1688开放平台上注册开发者账号，创建应用，

参与评论您还未登录，请先登录后发表或查看评论

阿里巴巴图标库的使用

m0_37751401的博客

11-15

2469

阿里巴巴图标库两种使用方式

WordPress引用阿里巴巴矢量图标库彩色图标

最新发布

TianYuBlog的博客

09-17

763

现在大部分博客图标都采用Font Awesome图标库，因为Font Awesome图标库满足了大部分用户的需求了，但做为喜欢花里胡哨的我们是不够的，Font Awesome图标库的图标不仅没有彩色的图标，个性化的图标还有点少！所以对于我们喜欢彩色的菜单图标选择性很少！所以只能引入其他的矢量图标库，今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。

阿里巴巴店铺的所有商品API接口（item_search_shop-获得店铺的所有商品接口），阿里巴巴API接口

weixin_19970108018的博客

06-29

1225

阿里巴巴店铺所有商品API接口

apiCloud实现加载更多效果，基本完美~

weixin_33845477的博客

02-26

298

阿里巴巴图标矢量库使用方法详解，适用于各种框架

qq_61838643的博客

08-10

7256

官网使用了三种方法，我将逐一讲解，有不对之处还请各位大佬指正添加到购物车，选择完成后点击上方导航栏图标之后选择添加至项目（没有项目可以临时创建一个）选择完成之后会自动跳转至资源管理界面，查看刚才的选择的图标如果是vue项目，可以把代码复制在app.vue的style标签里，如果没有使用框架，直接写在css文件里引入即可。

阿里巴巴矢量图标批量下载 IconontDownload.js

09-04

如何批量下载阿里巴巴矢量图标库的图标？ 1.打开阿里巴巴矢量图标库的项目；2.按F12打开浏览器的开发者工具，复制并执行自动下载图标的代码。

copy_alibaba:一键复制阿里巴巴矢量图标库SVG图标，无需下载

05-11

阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。苦于每次想要使用图标库 的图标都需要下载图标===拉到文件夹====写文件路径/////或者是需要下载svg 后在经过啰嗦的复制粘贴...

阿里矢量图标库WPF使用Demo

12-27

阿里矢量图标库是一个由阿里巴巴旗下公司维护的在线矢量图标管理系统。它的核心是提供一个庞大的图标资源集合，供用户下载使用。这些图标不仅多样，而且质量高，且大多数是开源的。这意味着个人和公司都可以自由地将...

CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)

11-21

进入阿里巴巴矢量图标库 阿里巴巴矢量图标库 选择喜欢的图标的，点击添加到库选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）然后在右侧中点击添加至项目之后在个人主页中可以...

阿里巴巴矢量图标库的引入——symbol类型的使用——阿里图标组件封装

yehaocheng520的博客

04-20

5706

symbol类型的使用——阿里图标组件封装

阿里巴巴矢量图标库

努力向前，永远都在路上。。。。。。。

06-28

3410

官网:iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具http://www.iconfont.cn使用方法：1. 注册账号2. 登录后可搜索自己想要的字体图标3. 例如：搜索weibo4. 鼠标滑到自己想要的图标后，点击第一个购物车图形 5. 可在右上方的搜索框搜索下一个自己想要的图标，并加入购物车。6. 选择完毕后，点击右上方的购物车图样7. 然后点

引入阿里iconfont图标方法以及注意事项

tuonioooo

12-27

1万+

背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/ 在首页选择【图标管理】-【我的项目】点击【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标

阿里矢量图标的三种使用方式整理（uniapp）

时翎的博客

02-11

1万+

iconfont-阿里巴巴矢量图标库 web端iconfont使用引用方式： 1.unicode 引用（不支持多色，支持按字体的方式去动态调整图标大小，颜色） 2.font-class 引用（unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的） 3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式）兼容性 unicode >...

如何使用阿里巴巴矢量库找到免费好看的图标？

m0_59704905的博客

05-06

1495

阿里巴巴矢量库是一个免费的图形资源库，为设计师和创意人员提供了各种免费和优质的矢量图标和图形素材。一、啥是阿里巴巴矢量库？

阿里巴巴矢量图标库的使用，超详细用法

热门推荐

piaoliangj的博客

10-10

3万+

阿里巴巴矢量图标库在页面中的使用官网地址： iconfont 阿里巴巴矢量图标库 登录在页面中选择喜欢图标库点进鼠标悬停想要的图标选择添加入库入库成功后本图标会有一个虚线框右上角的库图标会有个数的小红点点击购物车图标选择添加至项目（如果没有就创建一个）确定就会跳转到我的项目页面选择图标添加入库选择 Font class 点击下载至本地下载完成后，打开压缩包，只解压一个iconfont.css文件到页面要用到的css包里然后开始在代码中操作在head中导入

Iconfont-阿里巴巴矢量图标库

jattxgt的博客

07-29

6881

1、可以对单个图标下载，下载PNG图片应用到项目中去。 2、将需要的图标添加到购物车中，然后下载生成的代码，应用到项目中去。好处是可以调整图标的大小以及颜色，很方便。效果图：使用步骤使用步骤如下：第一步：引入项目下面生成的 fontclass 代码： <link rel="stylesheet" href="./iconfont.c...

阿里巴巴矢量图库的引用以及更新

m0_52943868的博客

03-29

8102

1、打开阿里巴巴矢量图库的官方网站 iconfont-阿里巴巴矢量图标库 2、登录 3、

使用 阿里巴巴矢量图标库

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类来实现。请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。