设置图标的方法阿里巴巴矢量图标库的使用

最新推荐文章于 2022-04-27 10:34:13 发布

原创最新推荐文章于 2022-04-27 10:34:13 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

学习笔记专栏收录该内容

68 篇文章

订阅专栏

本文介绍了两种在网页中添加图标的方案。方法一是直接通过设置DOM元素的class属性与预设的URL图片对应，这种方法需要提前设定图片大小和颜色。方法二是利用阿里巴巴矢量图标库Iconfont，用户可以下载项目到本地并替换对应文件，然后在main.js中引入iconfont.js，通过class与iconfont.json中的class匹配实现图标显示。

方法1：通过设置dom的class 与其绑定对应的url图片即可。但这样图片需要预先设置好大小颜色等等
方法2：https://www.iconfont.cn/ iconfont-阿里巴巴矢量图标库
将图标加入项目将配置好的项目下载至本地并替换本地项目中对应的目录文件
在这里插入图片描述
在本地项目main.js文件中引入iconfont.js 在dom元素中class 与iconfont.json文件中的class 一一对应即可

<i class="iconfont icon-font_class"></i>
<!-- font_class就是对应图标在iconfont.json文件中的class名称 -->

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

跳动的世界线

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

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

m0_63026408的博客

05-06

1493

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

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

m0_45858045的博客

02-03

2844

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

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

class文件的图标修改

weixin_30402085的博客

12-03

342

文件的上边的工具--文件夹选项--文件类型--扩展名栏找到class--下边的高级--更改图标转载于:https://www.cnblogs.com/liuzhong1987/archive/2011/12/03/2274999.html

阿里矢量图标库 - Font class 方式使用说明

前端技术

02-02

4345

目录一、下载二、引入方式一方式二方式三三、使用效果 1 效果 2 效果 3 效果 4 效果 5 效果 6 效果 7 四、iconfont 冲突一、下载官网：https://www.iconfont.cn/ 1、先登录，将所需图标添加到购物车。 2、选择“下载代码”。 3、解压后的文件目录。 4、这是我选的图标。二、引入在vue项目中使用，这是我的目录结构：方式一全局引入，在 index.html 文件中，使用 l.

vue中使用第三方阿里巴巴矢量图标库，并修改图标大小

yuanchangliang的博客

12-09

5265

从我写第一个vue页面开始，我就想用第三方的图标库了，实在是element-ui的图标库太浅了，能用的就那么几个。现在这个心病终于解决了 1.浏览器搜索阿里巴巴矢量图库iconfont 2.登录，可以使用新浪微博账户或者github账户 3.创建项目项目创建完成后，点击购物车，然后选择加入项目即可可以选择多个，选择完成后，再次点击资源管理，进入刚刚创建的项目，选择将加入项目的图标本地下载。下载完成并解压后，有好多文件，我们只要以下5个即可将上面的5个文件复制粘贴到vue-cli项目中的.

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

热门推荐

张时贰的博客

12-27

1万+

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

微信小程序之阿里图标库icon的symbol引入无需下载支持彩色图标

qq_28016751的博客

03-23

2363

创建项目，将需要的图标加入项目中 symbol方式引入优势支持多色图标了，不再受单色限制。标签自带size属性，也可以通过css调整样式（使用过程中，在电脑上打开微信小程序，样式会有偏）。不过不影响手机端使用。使用步骤 1.微信小程序开发工具，项目的根目录，鼠标右键，打开终端，输入 npm init -y（会多一个package.json文件） 2.输入npm install mini-program-iconfont-cli --save-dev（会多一个node_modules，不

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

03-27

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

精选资源

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

05-11

一键复制阿里巴巴矢量图标库SVG图标，无需下载 阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。苦于每次想要使用图标库的图标都需要下载图标===拉到文件夹====写文件路径/...

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

09-04

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

微信小程序引入阿里巴巴彩色图标字体（Symbol）

m0_54585610的博客

11-02

1509

步骤一：在微信小程序开发者工具的工作的根目录打开cmd，输入 npm install mini-program-iconfont-cli --save-dev 步骤二：输入命令，生成iconfont.json文件 npx iconfont-init 步骤三：将彩色图标添加入购物车，然后添加至你的项目步骤四：更新代码后复制粘贴到iconfont.json的"symbol_url" 步骤五:iconfont.json: { "symbol_url": ...

想在原有的基础上，再次添加一些阿里图标的进坑

qq_44162778的博客

04-12

2086

1、首先去阿里巴巴图库找你喜欢的图标——添加入库 2、选择完所有需要的图标后，添加倒项目中 3、找到你的项目点击下载到本地 4、下载完成进行解压，是这样色儿的！！因为在此次添加图标之前我们项目中是有图标的，所以我们只需要以下四个文件就可以了注意：上图这四个文件的名字不要跟项目中本身iconfont的文件名字重复了哦，得修改成不一样名称哦把文件拷进项目中这一步就可以了哦别急还没完！！！别急还没完！！！ 5、把刚下载的哪个图标文件里面的json文件打开把这一串儿放到之前项目iconfon

怎么使用阿里巴巴矢量图标

Amouzy的博客

09-08

6094

1.打开阿里巴巴矢量图标库官网（https://www.iconfont.cn/），有账号的可以直接登录，没有账号的需要注册一个。 2.查找想要的图标。简单使用如果只是需要一两个图标：例如想要倒三角，直接搜索“倒三角”，便出现相应的图标，点击所需图标的”下载“按钮然后会出现弹框，在这里可以选择想要的颜色可选择相应的下载格式：（1）若选择PNG格式，将图片下载下来直接html中插入。（图像文件的 URL视你图片的位置而定。以下是html和图片文件同一目录的情况） <img src="/1.

vue前端项目中使用阿里矢量图标（Font class）

以沫wh的博客

10-18

2672

一、登录阿里巴巴矢量图标库 阿里巴巴矢量图标库 二、点击图标库三、选择图标选择图标后，会进入该类型的图标库，然后鼠标划上想选择的那个图标，会有三个选择，分别为“添加入库”， “收藏”和“下载”，这里我们点击“添加入库” 四、加入购物车点击“添加入库后”，我们会在页面的右上角看到购物车的图标，然后点击进入购物车点击“添加至项目”，选择好项目名称后点击“确定”，我们即可在项目中看到该图标 5 使用进入项目后，点击“Font class”,然后点击下载至本地然后解压到文件夹 ...

vue 项目中使用阿里巴巴矢量图标库iconfont最简单方便的方法

weixin_44011751的博客

10-19

621

1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.把需要的图标添加到购物车 3.打开购物车,添加至项目,项目如果没有就新建一个即可 4.然后打开自己的项目,就可以看到自己的项目里面添加的图标了 5.这时候就可以看到自己的项目了,点击生成css文件在线链接和js在线链接 6.在vue项目中的public的index.html中引入,完成以后就可以正常使用了  <link rel="style

前端阿里矢量图的使用步骤

m0_64207574的博客

02-15

1345

前端阿里矢量图的使用步骤

阿里矢量图库 iconfont 引入项目使用方法

my_batis的博客

04-27

3742

1.打开阿里巴巴矢量图标库官网https://www.iconfont.cn/login? 注册或登录 2.搜索自己想要的所有图标，添加入库； 3.新建项目，添加所有图标至项目中； 3.1.打开自己的购物车 3.2.新建项目不要直接下载代码，或缺少所需文件 4.创建完成自动跳转至项目页面，下载至本地即可，解压后将所有文件放入项目的同一文件夹中；解压之后的文件放入项目同一文件目录下 5.项目中引入即可 #引入css样式 <link rel="stylesheet" type="

阿里矢量图标库 - 如何修改和使用自定义字体名称

前端技术

01-06

2995

前言此篇直接绕过下载和 vue 项目中的使用，如果对这块内容还不清楚，可先参考《阿里矢量图标库 - CSS 方式使用说明》 1. 使用方式下载后，打开demo_index.html，在页面最下有对阿里详细的使用介绍。我直接截图，可仔细阅读对比他们的区别； 2. iconfont.css 在修改自定义字体名称前，我们先仔细看看 iconfont.css 这个文件。图中有 3 个 iconfont， 1. 字体名称，用于 Unicode 和 Font...

阿里巴巴矢量图标库使用方法

设置图标的方法 阿里巴巴矢量图标库的使用

设置图标的方法阿里巴巴矢量图标库的使用