在我們的網站或應用程序中，圖標通常是不可缺少的一部分。雖然我們可以從外部來源引用現有的圖標庫，但在有些情況下，我們需要特定的圖標。在這種情況下，我們可以使用 CSS 來創建我們自己的圖標，而不必使用圖像或其他資源。

首先，我們應該了解兩個非常有用的 CSS 屬性：content 和 icon。content 屬性用于插入內容或字符，而 icon 屬性用于將自定義字體與內容或字符相關聯。

接下來，我們來看一些 CSS 代碼，可以創建自定義的圖標：

@font-face {
font-family: 'my-icons';
src: url('my-icons.ttf') format('truetype');
/* Replace my-icons.ttf with the path to your font file */
}
.icon {
font-family: 'my-icons';
font-style: normal;
font-weight: normal;
speak: none;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon:before {
content: '\e001';
/* Replace \e001 with the Unicode code point of your icon */
}

在這段代碼中，我們首先定義了 my-icons 字體并將其與我們的字體文件相關聯。然后，我們定義了 .icon 類，該類將 my-icons 字體應用于其樣式。最后，我們定義了 .icon:before 偽元素，以插入我們自定義圖標的 Unicode 值。

為了可以看到你的自定義圖標，你可能需要將您的字體導入到網站或應用程序的樣式表中。在導入后，可以通過添加 .icon 類到 HTML 元素中以顯示自定義圖標。

總之，通過使用 content 和 icon 屬性，我們可以使用 CSS 創建自定義圖標，這使得我們在不使用其他資源的情況下，輕松地為網頁或應用程序添加特定的符號或圖像。