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

文章目录

    • 什么是 iconfong
    • 创建一个自己的项目
    • 如何使用
      • Unicode 使用方法
      • Font class 使用方式
      • Symbol 使用方式
      • 还有一种使用方式 `在线链接`(不推荐,但可用于测试)

什么是 iconfong

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

创建一个自己的项目

iconfont阿里巴巴是亮图标库
去到官网在右上角先登录一下。(可以使用 微信 登录或者是 微博 登录)

第一步:创建一个项目
在网站的首页选择 资源管理 > 我的项目
在这里插入图片描述
在这里插入图片描述
新增一个项目。
接下来我们就可以添加图标到我们刚创建的项目中去了。
在这里插入图片描述
找到自己所要使用的图标添加到购物车即可
这里说明一下,图标其实有两种

  • 一种是纯色的图标(就是单一颜色的图标)
  • 另一种是精美的图标(别人搭配好颜色的那种)

在这里插入图片描述

选择完自己所要用的图标后,添加至我们刚刚创建的项目。

如何使用

有三种使用方式,我们一个个来,首先先把字体文件下载到本地。
在这里插入图片描述
下载完的文件解压出来,有以下几个文件
在这里插入图片描述

Unicode 使用方法

在你的项目中创建一个 icons 的文件夹,将下载完的字体文件全部复制进去。
在这里插入图片描述
主要是看 iconfont.css 这个文件(引入到你的项目中去)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./icons/iconfont.css"><style>.icon {font-size: 100px;color: red;}</style>
</head><body><div class="content"><!-- &#xe61b; 这个是网站上图标对应的代码 --><span class="iconfont icon">&#xe844;</span></div>
</body></html>

注意自己图标代码与自己添加的图标保持一致
无论图标是有颜色还是精美的图标使用 Unicode 的方法引入都是黑色的。
在这里插入图片描述这样就可以了与文字是一样的。(可以改变字体大小,文字颜色等。)在这里插入图片描述

问题总结:使用 Unicode 可能存在的问题

  • 确保 iconfont.css 文件中引入的 iconfont.woff2iconfont.wofficonfont.ttf 文件路径是正确的
  • 在标签上使用时,确保标签的 class 属性中有 iconfont
  • 确保自己的图标代码是正确的

Font class 使用方式

Font class 的使用方法与 Unicode 是一样的。

在这里插入图片描述
重新下载图标文件到本地引入到自己项目中去。
还是引入 iconfont.css 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./icons/iconfont.css"><style>.icon {font-size: 100px;color: red;}</style>
</head><body><div class="content"><span class="iconfont icon--jianpan icon"></span></div>
</body></html>

在这里插入图片描述
注意事项同上

  • 确保 iconfont.css 文件中引入的 iconfont.woff2iconfont.wofficonfont.ttf 文件路径是正确的
  • 在标签上使用时,确保标签的 class 属性中有 iconfont
  • 确保自己的图标 class名 是正确的

Symbol 使用方式

Symbol 的方式与前两种就不太一样了。
还是先下载字体文件。
这次我们需要引入 iconfont.js 这个文件。
使用 svg 的方式引入图标

  • 支持多色图标了,不再受单色限制。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./icons/iconfont.js"></script><style>.icon {width: 300px;height: 150px;}</style>
</head><body><div class="content"><svg class="icon svg-icon" aria-hidden="true"><use xlink:href="#icon--jianpan"></use></svg></div>
</body></html>

需要注意 use 标签中 xlink:href 对应的图标代码。
使用 Symbol 的方式解决了单色图标的问题,(也就是说可以使用我们之前引入的多颜色的图标了)

在这里插入图片描述

还有一种使用方式 在线链接(不推荐,但可用于测试)

每种方式下面都有复制代码这个操作
我们可以直接使用在线链接来使用
在这里插入图片描述

<!-- Symbol 使用 script 标签引入 -->
<script src="//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.js"></script>
<!-- Font Class 使用 link 标签引入 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.css">
<!-- Unicode 直接拷贝代码到 css 中 -->
<style>
/* 在线链接服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {font-family: 'iconfont';  /* Project id 4343037 */src: url('//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.woff2?t=1719977126887') format('woff2'),url('//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.woff?t=1719977126887') format('woff'),url('//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.ttf?t=1719977126887') format('truetype');
}
</style>

注意:当你的项目中添加了新的图标,在线链接需要手动点机更新一下,并在项目中换上新的地址才能使用。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式】行为型-状态模式

在变幻的时光中&#xff0c;状态如诗篇般细腻流转。 文章目录 一、可调节的灯光二、状态模式三、状态模式的核心组件四、运用状态模式五、状态模式的应用场景六、小结推荐阅读 一、可调节的灯光 场景假设&#xff1a;我们有一个电灯&#xff0c;它可以被打开和关闭。用户可以…

snap和apt的区别简单了解

Linux中没有tree命令的时候提示安装的时候出现了两个命令&#xff0c;简单看了看两者有何区别&#xff08;一般用apt就可以了&#xff09;&#xff1a; sudo snap install tree 和 sudo apt install tree 这两个命令都是用来安装 tree 命令行工具的&#xff0c;但它们使用的是不…

个人博客|PHP源码|支持多国语言切换

一. 前言 今天小编给大家带来了一款可学习&#xff0c;可商用的&#xff0c;支持多国语言的个人博客网站源码&#xff0c;支持二开&#xff0c;无加密。此博客相当简洁&#xff0c;也适合海外。详细界面和功能见下面视频演示。 如果您正好有此需求源码&#xff0c;请联系小编…

开源自动化热键映射工具autohotkey十大用法及精选脚本

AutoHotkey&#xff08;AHK&#xff09;是一款功能强大的热键脚本语言工具&#xff0c;它允许用户通过编写脚本来自动化键盘、鼠标等设备的操作&#xff0c;从而极大地提高工作效率。以下是AutoHotkey的十大经典用法&#xff0c;这些用法不仅解放了用户的双手&#xff0c;还展示…

程序化交易广告及其应用

什么是程序化交易广告&#xff1f; 程序化交易广告是以实时竞价技术即RTB&#xff08;real-time bidding&#xff09;为核心的广告交易方式。说到这里&#xff0c;你可能会有疑问&#xff1a;像百度搜索关键词广告还有百度网盟的广告&#xff0c;不也是CPC实时竞价的吗&#x…

论文学习_UVSCAN: Detecting Third-Party Component Usage Violations in IoT Firmware

论文名称发表时间发表期刊期刊等级研究单位 Understanding the Security Risks Introduced by Third-Party Components in IoT Firmware 2024年IEEE TDSCCCF A佐治亚理工学院 1. 引言 研究背景&#xff1a;物联网&#xff08;IoT&#xff09;已经无处不在&#xff0c;为我们…

HQChart报价列表高级应用教程7-走势列数据对接

HQChart报价列表高级应用教程7-走势列数据对接 走势列小程序效果图PC效果图HQChart代码地址走势列类型配置走势列数据格式示例走势列 单独使用一列显示每个股票的走势图 小程序效果图 PC效果图 HQChart代码地址 地址:github.com/jones2000/HQChart 走势列类型 REPORT_COL…

[工业网络] 模型建立

普渡大学ICS参考模型 普渡企业参考架构&#xff08;PERA&#xff09;是由西奥多J威廉姆斯&#xff08;Theodore J. Williams&#xff09;和普渡大学计算机集成制造工业大学联盟的成员在1990年代开发的企业架构参考模型。该模型被ISA-99&#xff08;现为ISA/IEC 62443&#xff…

使用EndNote在Word中插入参考文献,并编辑参考文献样式方法

一、背景 在准备中期报告时&#xff0c;学校给的是Word模板&#xff0c;习惯了Latex排版和添加参考文献的便利后&#xff0c;真不想用word写东西。 之前投《机器人》期刊&#xff08;被拒了&#xff09;和准备开题的时候也是用word写的&#xff0c;当时为方便添加参考文献和定…

解决fastjson自动过滤null值

解决fastjson自动过滤null值 使用 SerializerFeature.WriteNullStringAsEmpty 解决 List<HistoryVector> historyVectors new ArrayList<>();HistoryVector historyVector new HistoryVector();historyVector.setInput("1");historyVector.setReason(&q…

计算机操作系统部分选填及大题整理

并发和&#xff08; 共享 &#xff09; 是操作系统的两个最基本的特征,&#xff08; 虚拟 &#xff09;和&#xff08; 异步 &#xff09; 是操作系统的重要特征&#xff0c;并发执行的程序失去可再现性现代操作系统的两个基本特征是&#xff08;程序的并发执行&#xff09;和资…

万界星空科技QMS系统:重塑质量管理新纪元

万界星空科技QMS&#xff08;Quality Management System&#xff09;质量管理系统是一套全面、高效的质量管理工具&#xff0c;旨在帮助企业提升产品质量、优化生产流程、降低质量成本。该系统具备多个具体功能模块&#xff0c;以下是对其主要功能模块的详细介绍&#xff1a; 一…

2024年7月3日 (周三) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 卸载工具 HiBitUninstaller: Windows上的软件卸载工具 《魅魔》新DLC《Elysian Fields…

​RAG与LLM原理及实践(8)--- Chroma 应用场景及限制

前言 通过前面几节的介绍&#xff0c;你应该对Chroma的运作原理有相当透彻的理解。Chroma的设计正如之前描述的&#xff1a; Chroma提供的工具&#xff1a; 存储文档数据和它们的元数据&#xff1a;store embeddings and their metadata 嵌入&#xff1a;embed documents an…

粗糙度轮廓仪功能简介:一体型轮廓仪功能亮点

在精密制造和质量控制领域&#xff0c;表面粗糙度和轮廓的精确测量是至关重要的。一体型轮廓仪为这一需求提供了全面的解决方案。它采用超高精度纳米衍射光学测量系统、超高直线度研磨级摩擦导轨、高性能直流伺服驱动系统、高性能计算机控制系统技术&#xff0c;为用户提供了一…

使用机器学习,通过文本分析,轻松实现原本复杂的情感分析

01、案例说明 本期分享案例是&#xff1a;文字分析-情感分析&#xff0c;内容是关于某部电影评论好坏的分析&#xff0c;使用大量的已知数据&#xff0c;通过监督学习的方法&#xff0c;可以对于未知的评论进行判断其为正面还是负面的评价。 对于数据分析&#xff0c;原来都是…

Go语言学习:每日一练3

Go语言学习&#xff1a;每日一练3 目录 Go语言学习&#xff1a;每日一练3方法接口继承类型断言 方法 方法是一类有接收者参数的函数。 接收者的类型定义和方法的声明必须在一个包里 type MyInt intfunc (m MyInt) Add(add int) int {return int(m) add } //OR func (m *MyInt)…

巴图制自动化Profinet协议转Modbus协议模块连接PLC和电表通信

1、免编写Modbus轮询程序实现PLC与电表通信的方法 在智能化时代&#xff0c;工业自动控制中的PLC和电表之间的通信是一个常见的需求。传统上&#xff0c;为了使PLC与电表通信&#xff0c;通常需要编写Modbus查询程序来读取和控制数据。然而&#xff0c;使用 巴图制自动化Prof…

235、二叉搜索树的最近公共祖先

给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个结点 p、q&#xff0c;最近公共祖先表示为一个结点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它自…

用 AI 生成绘本,含大量 prompt

画图过程&#xff0c;为了保证绘本输出的风格统一&#xff0c;角色连贯&#xff0c;画面内容与故事保持一致 1、画风统一的解决办法&#xff1a;固定一个插画师的风格&#xff0c;可以输入插画师的名字&#xff0c;或者垫图&#xff0c;即上传你需要借鉴风格的图片 2、角色连贯…