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

最新推荐文章于 2024-10-30 01:12:29 发布

原创最新推荐文章于 2024-10-30 01:12:29 发布 · 586 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

Vue学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何从阿里巴巴矢量图标库下载图标资源，并在项目中进行引入和使用的方法。主要内容包括：登录图标库网站、选择并下载图标、将图标文件加入项目目录以及在代码中调用图标。

1.图标资源下载

（1）登录阿里巴巴矢量图标库

（2）选择要使用的图标添加到项目

（3）点击下载到本地

2.在项目中引入

（1）将压缩包解压后加入项目指定目录下

（2）在main.js中引入

import '@/assets/iconfont/iconfont.css'

3.使用

 <el-button class="iconfont icon-diannao" @click="loginOut"></el-button>

iconfont是必须加的前缀，icon-diannao是图库所给，如下图所示

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lightoneone

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标

m0_45858045的博客

02-03

2771

下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。

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

最新发布

m0_63026408的博客

05-06

1430

首先我们需要找到阿里巴巴矢量库官网。

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

阿里巴巴矢量库iconfont使用方法大全

weixin_55688821的博客

07-16

3870

进入官网，打开你喜欢的任意素材库，将你喜欢的图标加入购物车。选完了就点右边的购物车。我们可以看到右下角有三个选项。第一个就是把这些矢量图直接加到自己的项目当中；第二个是直接把矢量图下载下来，不过此时下载下来的也就是图片了，不再是字体；第三种是直接下载文件。你可以选择添加至项目，右上角添加项目名称确定即可。然后我们可以看到这个页面，无论是Unicode还是Font class还是Symbol下载到本地的文件都是一样，也就是前面讲的直接下载的文件。区别是引入方式的不同。

阿里巴巴图标库iconfont的使用方式

m0_67584973的博客

07-03

5597

Iconfont 是一种图标字体服务。它将各种图标设计转换为字体格式，通过特定的代码或 CSS 样式来调用和显示这些图标。可以理解成将图片变成了文字，文字与图片的对比就显而易见了，使用文字图标体积更小，放大也不会失真。

VUE element-ui中el-button使用iconfont图标

hhb442的博客

06-27

4361

注意：这里icon-font将图标作为文字格式处理，即修改字体大小样式，icon随之改变。4、将文件解压后，在项目assets下新建文件，将解压文件放入。1、进入iconfont官网。可以看到和其他相同的效果；可以看到字体样式太大。并使用任意方式登录。

Vue项目中使用阿里巴巴矢量图标库（IconFont)

qq_41765777的博客

11-29

940

1、搜索图标 2、加入购物车 3、添加到项目 4、生成在线css文件 5、在项目中引入在线css文件 <style> @import "https://at.alicdn.com/t/font_2835759_vy9n9k1f7o9.css"; </style> 6、使用 <i calss="iconfont icon-home"></i> <span class="iconfont icon-home></spna

阿里巴巴矢量图标库（网页）

C891212的博客

05-24

1万+

首先，阿里巴巴矢量图标库网站资源非常齐全，主要包含了图标库，矢量插画库，3D插画库，动效库，字体库等等，基本能满足小伙伴们日常开发设计需求，里面的所有素材都可以免费使用。图标库里包含有2300W+的矢量图标素材，供小伙伴们使用，可用于PPT，网站应用等，支持所有图标库，官方图标库，多色图标库和单色图标库。字体库提供了包括东方大楷，数黑体，阿里巴巴普惠体，得意体，站酷酷黑等10多种免费字体。图标素材支持AI,SVG,PNG,代码格式等等格式下载。页面上明确标明了免费使用，所以小伙伴们完全不用担心。

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

03-27

阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。首先，我们需要了解`iconfont.css`和`iconfont.js`这...

iconfont阿里巴巴矢量图转base64资源包

07-27

这个"iconfont阿里巴巴矢量图转base64资源包"提供了将矢量图标转换为Base64编码的能力，从而优化了网页加载速度和资源管理。首先，我们来了解一下什么是Iconfont。Iconfont，也被称为“字体图标”，是一种将图标...

关于Iconfont-阿里巴巴矢量图标库的使用

Gyanga的博客

06-09

883

Iconfont的使用???? ????进入阿里巴巴矢量图标库官网进行登录可以通过github或新浪微博登陆 ????找到图标管理 →新建项目/我的项目 ????在图标库查找到需要的图标后添加到购物车 ????添加到购物车后点击网页右上角的购物车图标选择添加到项目 ????添加了新的图标后点击Font class中的更新代码 ????在中生成新样式代码后点击进入，内容全部复制 ????将项目中static/font/iconfont.css目录中的代码替换成之前复制的代码 Ps:该样式已在

阿里矢量图标库-iconfont使用教程

qq_52626006的博客

10-30

7409

本篇文章介绍如何在项目使用阿里巴巴矢量图标库。

阿里巴巴矢量图icon引用方法和与文字对齐的解决方法

CCG_T的博客

09-05

6822

平时写界面时经常要引用阿里巴巴矢量图icon（http://www.iconfont.cn/），（一）引用icon有两种方法：（1）直接在html里面添加i标签（效果图如下）：  <div class="active-focus"> <i class="icon iconfont icon-eye"></i> <p>23</p> <i class="

el-button中使用阿里矢量图标

weixin_47615289的博客

06-26

1153

/这里是文件路径的简写，只有你的图片文件名称。二，标签展示elementui自带的图标的方法。前提：vue-element-admin框架。3.直接在想加按钮的地方加下面的代码就好了。2.将图标放到下方标记的文件夹中。1.去阿里矢量图官网下载图标。

iconfont-阿里巴巴矢量图标库使用教程

张时贰的博客

12-27

1万+

iconfont-阿里巴巴矢量图标库使用教程文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果一、前言 iconfont-阿里巴巴矢量图标库 矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点：图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要

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

rainylf的博客

01-11

725

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

阿里巴巴矢量图标的下载以及在vue项目中引入使用

ZhengDaHui360的博客

12-23

4333

阿里巴巴字体图标的下载，以及字体图标在vue项目中的使用步骤（详细）

【Element-ui】Icon 图标与Button 按钮

热门推荐

m0_62599305的博客

12-02

4万+

在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。

vue项目使用iconfont图标

weixin_46252229的博客

03-18

270

【代码】【vue项目使用iconfont图标】

阿里iconfont使用教程

m0_73935181的博客

06-15

2290

一、打开iconfont官网iconfont官方网站二、点击右上角登录并注册三、在上方搜索框中输入想要的图标四、找到自己想要的图标，点击加入库五、点击购物车图标六、创建项目，输入项目名称七、选择Unicode，点击下载本地八、将下载好的字体图标的压缩包解压，将css文件放到项目CSS文件夹中并更改路径九、在项目中创建目录并将这三个文件放进目录十、在HTML中引入iconfont.css文件十一、挑选相应图标并获取字体编码，应用于页面

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

02-21

### 如何使用阿里巴巴 Iconfont 矢量图标库 #### 注册与登录为了能够充分利用 Alibaba 的 Iconfont 图标库，用户需先访问官方网站 https://www.iconfont.cn/ 并完成账号注册流程[^3]。 #### 创建项目并添加图标成功登录后，在个人中心创建一个新的项目。之后可以从网站提供的大量免费图标中挑选所需，并加入到该项目内。对于特定需求，还可以上传自定义SVG文件来扩展可用资源集合[^1]。 #### 下载字体包或在线引用当所有必要的图标都已选好时，可以选择下载整个项目的离线版本作为 WebFont 字体形式用于本地开发环境；另一种方式则是通过获取线上链接直接嵌入HTML页面头部标签里实现即时加载显示效果[^2]。 #### HTML 中引入图标无论是采用哪种方法获得的图标引用地址，最终都需要将其正确地写入网页源码之中以便浏览器解析渲染：如果选择了 **WebFont 方案** ，则只需复制给出的一段 `<link>` 和 `<style>` 代码片段粘贴至目标站点模板相应位置即可生效；而针对个别场景下可能更倾向于单独调用某几个常用图形的情况，则建议利用 `@font-face` 定义规则配合 CSS 类名的方式灵活控制展示逻辑。 ```html  <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'); }); ```