01.HTML

图标库的使用

iconfont 和 fontawesom

iconfont 使用-彩色图标

阿里的iconfont字体库，彩色字体最多 40 个，这解释了超限后原色丢失

iconfont 使用-彩色图标

<!-- 引用js --> 
<script src="iconfont.js"></script> 
 
<!-- 设置css --> 
<style type="text/css"> 
    .icon { 
      width: 1em; height: 1em; 
      vertical-align: -0.15em; 
      fill: currentColor; 
      overflow: hidden; 
    } 
</style> 
 
<!-- 使用图标 --> 
<svg class="icon" aria-hidden="true"> 
    <use xlink:href="#icon-user"></use> 
</svg> 

vue 导入 iconfont 中的 svg 图标

https://blog.csdn.net/weixin_45266125/article/details/102746945

vue引入svg

「彩色」勾选管什么

	勾「彩色字体」	不勾
得到什么	Font 带 COLR（<i> 自带多色）	普通单色字体 + SVG/Symbol
上限	≤40	无此限
SVG/Symbol 的 fill	有（若上传稿有）	同样有（若上传稿有）

fill 跟「是否勾彩色」无关，跟上传的源 SVG 是否多色有关。本仓已经验证过：字体已是单色、超 40，但 iconfont.js 里菜单图标仍有 fill="#7E49EF" 等。

推荐分工

• 纯色库：换肤、Tab → 不勾彩色，下 Font/Symbol
• 多色库：菜单原色 → 也不勾彩色，只下 SVG / iconfont.js，工程用 SvgIcon colorful

多色库的定位是「SVG 货源」，不是「彩色字体包」。只有图标很少（≤40）且必须 Font-class 自带色时，才勾彩色。

上传时用带 fill 的多色 SVG；若被洗成全 currentColor，下载出来也会是单色。

使用 background-image 实现渐变色

background-image: linear-gradient(90deg, rgb(56, 111, 254) 0%, rgb(117, 135, 255) 100%);

特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码
Α	Α	Α	Β	Β	Β	Γ	Γ	Γ
Δ	Δ	Δ	Ε	Ε	Ε	Ζ	Ζ	Ζ
Η	Η	Η	Θ	Θ	Θ	Ι	Ι	Ι
Κ	Κ	Κ	Λ	Λ	Λ	Μ	Μ	Μ
Ν	Ν	Ν	Ξ	Ξ	Ξ	Ο	Ο	Ο
Π	Π	Π	Ρ	Ρ	Ρ	Σ	Σ	Σ
Τ	Τ	Τ	Υ	Υ	Υ	Φ	Φ	Φ
Χ	Χ	Χ	Ψ	Ψ	Ψ	Ω	Ω	Ω
α	α	α	β	β	β	γ	γ	γ
δ	δ	δ	ε	ε	ε	ζ	ζ	ζ
η	η	η	θ	θ	θ	ι	ι	ι
κ	κ	κ	λ	λ	λ	μ	μ	μ
ν	ν	ν	ξ	ξ	ξ	ο	ο	ο
π	π	π	ρ	ρ	ρ	ς	ς	ς
σ	σ	σ	τ	τ	τ	υ	υ	υ
φ	φ	φ	χ	χ	χ	ψ	ψ	ψ
ω	ω	ω	ϑ	ϑ	ϑ	ϒ	ϒ	ϒ
ϖ	ϖ	ϖ	•	•	•	…	…	…
′	′	′	″	″	″	‾	‾	‾
⁄	⁄	⁄	℘	℘	℘	ℑ	ℑ	ℑ
ℜ	ℜ	ℜ	™	™	™	ℵ	ℵ	ℵ
←	←	←	↑	↑	↑	→	→	→
↓	↓	↓	↔	↔	↔	↵	↵	↵
⇐	⇐	⇐	⇑	⇑	⇑	⇒	⇒	⇒
⇓	⇓	⇓	⇔	⇔	⇔	∀	∀	∀
∂	∂	∂	∃	∃	∃	∅	∅	∅
∇	∇	∇	∈	∈	∈	∉	∉	∉
∋	∋	∋	∏	∏	∏	∑	∑	−
−	−	−	∗	∗	∗	√	√	√
∝	∝	∝	∞	∞	∞	∠	∠	∠
∧	∧	⊥	∨	∨	⊦	∩	∩	∩
∪	∪	∪	∫	∫	∫	∴	∴	∴
∼	∼	∼	≅	≅	≅	≈	≈	≅
≠	≠	≠	≡	≡	≡	≤	≤	≤
≥	≥	≥	⊂	⊂	⊂	⊃	⊃	⊃
⊄	⊄	⊄	⊆	⊆	⊆	⊇	⊇	⊇
⊕	⊕	⊕	⊗	⊗	⊗	⊥	⊥	⊥
⋅	⋅	⋅	⌈	⌈	⌈	⌉	⌉	⌉
⌊	⌊	⌊	⌋	⌋	⌋	◊	◊	◊
♠	♠	♠	♣	♣	♣	♥	♥	♥
♦	♦	♦				¡	¡	¡
¢	¢	¢	£	£	£	¤	¤	¤
¥	¥	¥	¦	¦	¦	§	§	§
¨	¨	¨	©	©	©	ª	ª	ª
«	«	«	¬	¬	¬	­	­	­
®	®	®	¯	¯	¯	°	°	°
±	±	±	²	²	²	³	³	³
´	´	´	µ	µ	&#181	"	"	"
<	<	<	>	>	>	'		'