CSS3可以很容易地添加新的字體圖標，這樣就可以在Web項目中使用自定義圖標。以下是如何在CSS3中添加新字體圖標的步驟：

@font-face {
font-family: 'custom-icons'; /* 自定義字體名稱 */
src: url('path-to-fonts/custom-icons.eot');
src: url('path-to-fonts/custom-icons.eot?#iefix') format('embedded-opentype'),
url('path-to-fonts/custom-icons.woff2') format('woff2'),
url('path-to-fonts/custom-icons.woff') format('woff'),
url('path-to-fonts/custom-icons.ttf') format('truetype'),
url('path-to-fonts/custom-icons.svg#custom-icons') format('svg');
font-weight: normal;
font-style: normal;
}

第一步是通過使用@font-face規則將自定義字體添加到CSS。這個規則定義了自定義字體的名稱和字體文件的位置。在這個例子中，字體的名稱是“custom-icons”，字體文件存放在名為“path-to-fonts”的目錄中。字體文件應該包含EOT、WOFF2、WOFF、TTF和SVG格式的字體文件，以支持不同的瀏覽器或操作系統。在使用Web背景圖形或SvgSprites之前，請務必使用自定義字體。

.icon {
font-family: 'custom-icons';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: optimizeLegibility;
line-height: 1;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon:before {
content: "\e600"; /* 定義圖標的代碼點 */
}

第二步是將自定義字體應用到元素中，例如使用上例中定義的“custom-icons”字體的元素，它們應該包含一個:before偽元素和一個content屬性，該屬性引用了自定義字體文件中與所需圖像關聯的圖像代碼及其字符代碼點。在這個例子中，代碼點是"\e600"。這段內容指轉義字符的意思，而這個意思在你指定的font-face字體中是對應的一個字形。因此，該代碼將引用該“custom-icons”字體文件的第一個字符。

這樣就可以在CSS3中簡單、高效地創建新的字體圖標了。請注意，在使用自定義字體之前，請確保您已經獲得準確授權使用。