1. Font Awesome
Font Awesome图标库的原理，首先，一个字体中是存在特殊符号的，例如网页底部常见的©的编码就是©。而Font Awesome本质上是把图标做成了字体文件，一个图标代表一个特殊符号，因此我们需要这个图标的话只需要引用这个字体文件就好了
-
Font Awesome 下载下来的文件包含了当前版本的所有 icons 随着版本更新，图标库会越来越大。不过，Font Awesome 也提供了多种优化方式，比如：
- 选择性下载：只下载你需要的图标，可以避免加载不必要的图标。
- CDN 加载：通过 CDN 的方式按需加载图标，避免下载整个库。
- 自定义构建：官方提供了自定义构建工具，你可以选择性地构建只包含所需图标的 Font Awesome 文件。
-
推荐：CDN 加载
-
前缀：
fafa-solidfa-thin等 -
控制：因为font-awesome是字体, 所以用控制字体大小颜色的标签属性控制icons
[1]. www.cnblogs.com/halftion/p/…
[推荐2]. kumo.tw/article.php…
2. Google Fonts
官网：fonts.google.com/icons 可变图标字体
主意属性：
'FILL' 0,/*是否填滿 0 or 1*/
'wght' 100,/*粗細 100 ~ 700*/
'GRAD' 0,/*視覺平衡粗細 -25 0 200*/
'opsz' 20/*大小*/
也可以下载到本地使用
[1]. developers.google.com/fonts/docs/…
3. iconfont
项目设置中：
自定义了c-icon 默认是iconfont
<i class="c-icon c-icon-CheckboxUnchecked"></i>
<i class="c-icon"></i>
unicode/font class/symbol 区别
// chatgpt
在使用 iconfont 的时候，unicode、fontclass 和 symbol 这三种引用方式有一些明显的区别，分别适合不同的使用场景。以下是它们的具体区别：
1. Unicode 引用
原理：通过为每个图标分配一个独特的 Unicode 码位（类似于字符编码），将图标嵌入到文本内容中。
使用方法：你可以将图标像字符一样放入 HTML 中。
优点：
兼容性好：所有支持字体的地方都可以显示图标，包括 input 字段和 textarea。
无额外类名：不需要引入特定的类名，只需输入 Unicode 码。
缺点：
不直观：需要记住或查找每个图标的 Unicode 码，不如其他方式直观。
维护成本高：图标的 Unicode 编码如果变化，维护起来较麻烦。
2. Fontclass 引用
原理：通过给每个图标分配一个 CSS 类名来引用。
使用方法：在 HTML 中使用图标的类名。
优点：
直观易用：每个图标都有对应的类名，比较容易阅读和管理，类似于使用 Font Awesome。
可读性高：直接使用类名，便于理解和查找具体图标。
缺点：
灵活性差：需要确保类名和样式文件的对应关系正确。
不能用于输入框等地方：不像 Unicode，无法将图标作为普通字符放入 input 或 textarea。
3. Symbol 引用（SVG 引用）
原理：基于 SVG 技术，使用 <symbol> 标签定义图标，通过 <use> 标签来引用。
使用方法：使用 SVG 标签和 xlink:href 引用图标。
优点：
样式灵活：SVG 可以轻松缩放、改变颜色和应用复杂样式，具备高度的可定制性。
高质量：SVG 图标是矢量图形，不论放大或缩小，质量都不受影响。
缺点：
兼容性问题：较老的浏览器对 SVG 的支持可能有限。
语法复杂：比 unicode 和 fontclass 使用时稍微复杂一些。
总结：
Unicode：适合需要将图标嵌入到文本中的场景，兼容性好，但管理和维护不便。
Fontclass：类名直观，使用方便，适合大多数场景，尤其是在做图标库或展示图标的时候。
Symbol：基于 SVG，灵活性高，适合需要高度自定义图标样式的场景，特别是在响应式设计中效果好。
根据具体需求，可以选择合适的引用方式。如果你追求高质量的图标展示和样式控制，symbol 会更合适；而如果希望快速简单地应用，fontclass 是常见的选择。
4. 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>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/6c6a856ada.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2800913_8jwgg176x4c.css" />
<!-- <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_2800913_8jwgg176x4c.js" /> -->
<!-- <style>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: 'c-icon';
/* Project id 2800913 */
src:
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('//at.alicdn.com/t/c/font_2800913_8jwgg176x4c.woff?t=1726733871718') format('woff'),
url('//at.alicdn.com/t/c/font_2800913_8jwgg176x4c.ttf?t=1726733871718') format('truetype');
}
</style> -->
</head>
<body>
<div class="contains" style="display: flex;">
<div class="ifa-icons" style="flex: 1 ;border: 1px solid #333; padding: 10px;">
<h1>fa-icons</h1>
<br />
<div>
<!-- 未指定的 -->
<i class="fa-lock"></i> 、
<!-- 指定的 -->
<i class="fa-solid fa-lock"></i>、
<!-- 指定的 -->
<i class="fa fa-lock"></i>
</div>
<!-- free 显示 -->
<div><i class="fa-solid fa-map"></i></div>
<!-- pro 不显示 -->
<div><i class="fa-thin fa-map"></i></div>
<!-- style -->
<i class="fa-solid fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</div>
<div class="google-icons" style="flex: 1; border: 1px solid #333;">
<h1>google-icons</h1>
<br />
<span class="material-symbols-outlined"> search </span>
<span class="material-symbols-outlined"> logout </span>
<div>
<span class="material-symbols-outlined size-20">favorite</span>
<span class="material-symbols-outlined size-24">favorite</span>
<span class="material-symbols-outlined size-40">favorite</span>
<span class="material-symbols-outlined size-48">favorite</span>
</div>
<div>
<span class="material-symbols-outlined dark">favorite</span>
<span class="material-symbols-outlined dark-inactive">favorite</span>
</div>
<style>
/* Recommended icon sizes */
span.size-20 {
font-size: 20px;
font-variation-settings: 'OPSZ' 20;
}
span.size-24 {
font-size: 24px;
font-variation-settings: 'OPSZ' 24;
}
span.size-40 {
font-size: 40px;
font-variation-settings: 'OPSZ' 40;
}
span.size-48 {
font-size: 48px;
font-variation-settings: 'OPSZ' 48;
}
/* Rules for using icons as black on a light background. */
.dark {
background: black;
color: rgba(255, 255, 255, 1);
font-variation-settings: 'GRAD' -25;
}
.dark-inactive {
background: black;
color: rgba(255, 255, 255, 0.3);
font-variation-settings: 'GRAD' -25;
}
</style>
</div>
<div class="ali-iconfont" style="flex: 1; border: 1px solid #333;">
<span class="c-icon c-icon-shanhonggou"></span>
<span class="c-icon c-icon-shuiwen"></span>
<i class="c-icon c-icon-CheckboxUnchecked"></i>
<i class="c-icon"></i>
<i class="c-icon"></i>
</div>
</div>
</body>
</html>
