网页中使用阿里图标iconfont

iconfont:是由阿里提供的图标库,开发者可以使用,这里可能会涉及到版权问题。
商用的话,最好与作者联系沟通一下。
Address:iconfont

进入页面后,选择你想要的图标,然后加入到购物车:

点击右上角购物车: 将图标添加到项目:
会自动跳到我的项目:

下载完解压缩后:

我这里使用VS CODE演示,新建一个文件夹iconfont,把所有文件复制到此中,删掉两个demo文件:

注意: 在 demo_index.html 有你所下载图标的使用方法以及图标的信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--引入样式表 --><link rel="stylesheet" href="../../../iconfont/iconfont.css"><title>使用阿里的iconfont类库的图标</title><style>/*从iconfont下载的灰色图标属于图标字体,我们可以使用CSS设置字体的样式,比较灵活*//* 设置图标字体的样式 */i.iconfont.icon-laji1{font-size:100px;color: rgb(3, 202, 3);}i.iconfont{font-size:200px;color: greenyellow;}</style>
</head>
<body><!--字体类引入方式: --><i class="iconfont icon-laji1"></i><!--Unicode编码引入的方式 --><i class="iconfont">&#xe6d6</i>
</body>
</html>

显示效果：

网页中使用阿里图标iconfont相关推荐

如何在网页中使用阿里图标iconfont（2022最新版详细）
阿里图标iconfont使用下载文件使用文件下载文件点击链接进入阿里iconfont官网,用手机号注册并登录. 选择资源管理->我的项目选择右边的紫色图标新建项目,填写项目名,其他的默 ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
怎么在小程序中使用彩色图标iconfont
怎么在小程序中使用彩色图标iconfont 国际惯例,先上图: 概要一般我们在开发的时候,都是采用 iconfont 来管理项目里的图标,方便快捷.但是当我需要将项目迁移的小程序的时候,就遇到了很多 ...
在网页中画ICON图标
相信很多前端开发人员都做过导航栏图标,其实很多网站的导航栏图标使用的技术无外乎两种,CSS Sprite雪碧图和字体图标.下面就带大家一起熟悉一下这两种在网页中画ICON图标的方式. 一.使用CSS ...
在网页中制作icon图标
用字体在网页中画icon图标第一步:获取字体资源 IconMoon网站 https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮 ...
将阿里图标iconfont转成css代码显示
在做网站的过程中难免会使用到各种小图标,现在总结一个使用阿里图标转成css的方法. 1打开https://www.iconfont.cn网站,先登录账号,将自己需要的图标选择添加入库. 2在选择好自己 ...
vue引用矢量阿里图标iconfont详细步骤
1.登录阿里图标库:https://www.iconfont.cn/ 2.搜索你需要用的图标,加入到购物车 3.打开购物车,添加至项目 4.点击下载至本地 5.在项目中新建文件夹:src>ico ...
uniapp项目中使用阿里图标
一.uniapp引入阿里图标 1.第一步:选择想要的图标加入购物车注意:批量注入的方法(按F12 在console里面输入下方的代码) var span = document.querySelect ...

网页中使用阿里图标iconfont

网页中使用阿里图标iconfont相关推荐

最新文章

热门文章