希望更换搜索选项图标

hbghlyj

VSCode 在搜索栏中输入要查找的字符串后，可以使用搜索栏右侧的辅助功能按钮来修改搜索选项

• 区分大小写
• 全词匹配
• 使用正则表达式

VSCode 图标非常直观，论坛搜索选项可以借用这些图标，以提升视觉美感
因为 VSCode 是开源项目

hbghlyj

相关代码位于github.com/microsoft/vscode/blob/main/src/vs/base/browser/ui/codicons/codicon/codicon.css
这些图标采用的是 Truetype 字体 cdn.jsdelivr.net/npm/monaco-editor@0.52.0/min/vs/base/browser/ui/codicons/codicon/codicon.ttf
您可以通过 CSS 使用此字体，如下所示

1. <span class="codicon-case-sensitive"></span>
2. <span class="codicon-whole-word"></span>
3. <span class="codicon-regex"></span>
4. <style>
5. @font-face {
6.     font-family: "codicon";
7.     font-display: block;
8.     src: url("https://cdn.jsdelivr.net/npm/monaco-editor@0.52.0/min/vs/base/browser/ui/codicons/codicon/codicon.ttf") format("truetype");
9. }
11. [class*='codicon-'] {
12.     font: normal normal normal 16px/1 codicon;
13.     display: inline-block;
14.     text-decoration: none;
15.     text-rendering: auto;
16.     text-align: center;
17.     text-transform: none;
18.     user-select: none;
19. }
21. .codicon-regex:after {
22.     content: "\EB38";
23. }
25. .codicon-whole-word:after {
26.     content: "\EB7E";
27. }
29. .codicon-case-sensitive:after {
30.     content: "\EAB1";
31. }
32. </style>

复制代码

通过检查 Truetype 字体可以得到这些搜索选项对应的代码点分别是：
“区分大小写” Unicode：EAB1
“正则表达式” Unicode：EB38
“全词” Unicode：EB7E

hbghlyj

hbghlyj 发表于 2024-10-27 16:56

您可以通过 CSS 使用此字体，如下所示

如下所示