关于阿里矢量图标的三种使用方法

article/2025/9/24 2:21:31

1.Unicode方法:

1.1 首先我们登录阿里图标的网址:iconfont-阿里巴巴矢量图标库。

1.2 进入到我的项目里面:

1.3:点击复制代码:

1.4 在网页代码的style标签中粘贴:

 <style type="text/css" media="screen">@font-face {font-family: 'iconfont';/* project id 2153039 */src: url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.eot');src: url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.eot?#iefix') format('embedded-opentype'),url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.woff2') format('woff2'),url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.woff') format('woff'),url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.ttf') format('truetype'),url('http://at.alicdn.com/t/font_2153039_kfrgdzqqwup.svg#iconfont') format('svg');}</style>

注意:你复制下来的url地址前面是没有http的,所以得自己加上。

1.5 自己定义 .iconfont 样式:

 .iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}

1.6 引用于页面:

  <div><i class="iconfont">&#xe67b;</i></div>

在浏览器上运行,你可以发现成功了。

2.Font class方法:

2.1 在项目总选中Font class 点击复制代码

2.2用link引入到自己的网页上

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

注意:在引入的网址也是没有http的记得加上

2.3 在自己的网页中用 calss类来应用图标

<span class="iconfont icon-arrow"></span> 

3.Symbol方法:

3.1 在项目中选中Symbol,然后复制他的js文件地址

3.2 同样在自己的网页中引入 记得加上http;

<script type="text/javascript" src="http://at.alicdn.com/t/font_2135638_e05szvk1kza.js"></script>

3.3 然后在应用于页面:

  <svg class="icon" aria-hidden="true" > <use xlink:href="#iconxiangji"></use></svg>

以上都是在线引入的方式,当然还有下载到本地文件的方式,在这里我就不多讲啦。


http://chatgpt.dhexx.cn/article/mKMNFdXp.shtml

相关文章

vue使用阿里云矢量图

vue使用阿里云矢量图 在vue中虽然使用了elementui中的图标&#xff0c;但是会发现图标数量有限&#xff0c;不能够适&#xff08;zhuang&#xff09;用&#xff08;bi&#xff09;系统&#xff0c;因此在vue中使用阿里云矢量图。 添加矢量图到“购物车” 浏览器访问阿里云矢…

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

官网:iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库&#xff0c;提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造&#xff0c;设计和前端开发的便捷工具http://www.iconfont.cn 使用方法&#xff1a; 1. 注册账号…

如何从阿里巴巴矢量图标库引入图标

1、进入链接图标库 2、下载可能需要登录账号&#xff0c;如无账号可用手机号注册登录 3、在首页搜索自己需要的图标&#xff0c;&#xff08;此处以“花”为例&#xff09; 4、找到需要的图标&#xff0c;添加入购物车内 5、打开右上角购物车&#xff0c;找“花”&#xff0c…

阿里巴巴矢量图的使用方法

看到阿里巴巴的网站时发现 购物车前面的图标不是用img来做的&#xff0c;是用阿里巴巴的矢量图来做的。接下来介绍一下&#xff0c;关于阿里巴巴矢量图的使用方法。 1.首先进入网站 http://www.iconfont.cn/ 2.在输入框中输入自己需要的图标 比如输入&#xff1a;购物车 3.添加…

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

1、打开阿里巴巴矢量图库的官方网站 iconfont-阿里巴巴矢量图标库 2、登录 3、搜索你想要的类型然后加入购物车然后添加至项目 下载到本地 4、下载好的文件解压之后放在你的项目目录里边 在在你的项目中引入iconfont.css 文件 5、使用字符标签 创建一个i 标签 添加两个类名 …

阿里矢量图的使用

阿里矢量图的使用 在官网搜索你需要的图片名例如serch 下载或者复制放到弄的项目中即可 在index.html中引入这串样式 会变需要在官网查看 <link rel"stylesheet" href"http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css"></link>…

使用阿里巴巴矢量库

iconfont-阿里巴巴矢量图标库 1、先进去注册账号 2、进去后选好图标添加到购物车 3、点击右上角的购物车得到如下界面可添加至项目 4、添加成功后&#xff0c;在font class处会产生一个链接 5、接着在项目中引入这个链接 <link rel"stylesheet" href"ht…

uniapp开发App如何引入阿里巴巴矢量库图标

一、对阿里巴巴矢量库进行的操作 1、首先点进阿里巴巴矢量库&#xff08;阿里巴巴矢量图标库官方文档 https://www.iconfont.cn/&#xff09; 2、进行账号注册 3、选中想要的图标加入到购物车 4、点购物车会出现下面的页面&#xff0c;然后选择添加至项目 5、加入项目中选择…

如何使用阿里云矢量图标库

1.百度搜搜索阿里云矢量库 2.开发时多使用单色矢量库 3.选择一个你喜欢的图标 并且添加到购物车 4.点击右上角购物车 可以看到自己添加过的图标 5.点击添加至项目 专业人士可以使用github登陆 非专业人士使用微博登录即可 6.点击右侧加号 创建一个项目 自己进行命名 之后点击…

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

阿里巴巴矢量图标库的使用 官网地址&#xff1a; iconfont 阿里巴巴矢量图标库 登录在页面中选择喜欢图标库点进鼠标悬停想要的图标 选择添加入库 入库成功后 本图标会有一个虚线框 右上角的库图标会有个数的小红点 点击购物车图标 选择添加至项目&#xff08;如果没有就创建…

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

1.打开阿里巴巴矢量图标库官网&#xff08;https://www.iconfont.cn/&#xff09;&#xff0c;有账号的可以直接登录&#xff0c;没有账号的需要注册一个。 2.查找想要的图标。 简单使用 如果只是需要一两个图标&#xff1a;例如想要倒三角&#xff0c;直接搜索“倒三角”&am…

阿里巴巴矢量图标库在线链接用法

搜索打开阿里巴巴矢量图标库&#xff0c;找到想要的图标加入购物车&#xff0c;加入到同一个项目当中&#xff0c;点击如图所示处&#xff0c;即可生成链接&#xff0c;将链接复制进行如下操作。 这里是在Vue项目中使用的哦&#xff01; 使用方法在public文件夹中的index.html…

阿里巴巴矢量图标的使用

阿里巴巴矢量图标的使用 1.准备图标 1.打开官网 iconfont-阿里巴巴矢量图标库 2.搜索图标 3.添加至购物车 找到自己想要的图标添加到购物车 4.添加至项目 我已经建好一个名为测试的项目了&#xff0c;没有的新建一个就好 5.添加成功 查看项目仓库里面的图标 2.使用 阿里…

阿里巴巴矢量图的使用方法详细教程

1.在浏览器搜索阿里巴巴矢量图标库&#xff0c;进入官网后需要先登录&#xff0c;用微博登录就可以。 2.登陆成功后&#xff0c;在首页输入关键字搜索 3.加入购物车&#xff0c;点击购物车&#xff0c;添加至项目&#xff0c;新建项目&#xff0c;添加至新建的项目 4.添加项目之…

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

iconfont-阿里巴巴矢量图标库 web端iconfont使用 引用方式&#xff1a; 1.unicode 引用 &#xff08;不支持多色&#xff0c;支持按字体的方式去动态调整图标大小&#xff0c;颜色&#xff09; 2.font-class 引用 &#xff08;unicode使用方式的一种变种&#xff0c;语意明确…

阿里巴巴矢量图标库

官网:iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库&#xff0c;提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造&#xff0c;设计和前端开发的便捷工具http://www.iconfont.cn 使用方法&#xff1a; 1. 注册账号 …

#今日说码栏目#第十五集 iconfont-阿里巴巴矢量图的使用方法(保姆级教学,挑战全网最细致的使用矢量图)

iconfont-阿里巴巴矢量图的使用方法&#xff08;保姆级教学&#xff0c;挑战全网最细致的使用矢量图&#xff09; 前言 相信大家在前端开发过程中&#xff0c;需要使用各种奇奇怪怪的小图&#xff0c;可是我们不能总是截别人的图copy吧&#xff0c;我们要做一个优雅的程序员&…

怎么求铅直渐近线

什么是铅直渐近线 当x→a时f(x)→∞&#xff0c;则直线xa是曲线yf(x)的一条铅直渐近线。 怎么求铅直渐近线 在初等函数中&#xff0c;x取定义域的值一定是确定的函数值&#xff0c;不可能趋于∞。 所以x要取没有定义的点。下题函数中没有定一点为x1&#xff0c;令x→1分别求函…

3.6 函数作图与渐近线

本篇内容为函数图像的描绘与渐近线&#xff0c;既然函数作图放在前面&#xff0c;那本篇重点一定是——渐近线。 渐近线 水平渐近线 x→x0时&#xff0c;f(x)→A 一条水平渐近线 两条水平渐近线 函数图像可能没有水平渐近线&#xff0c;但是最多只有两条水平渐近线 铅直渐近…