CSS自定義字體圖標的使用非常廣泛，但在實際應用中，有時會出現字體圖標顯示為方格的情況。

@font-face {
font-family: 'myFont';
src:url('font/myFont.ttf');
font-weight:normal;
font-style:normal;
}
.icon {
font-family:myFont;
}

造成這種情況的原因是自定義字體文件（ttf或woff格式）沒有被正確引入或者瀏覽器不支持該字體。

解決方案：

1. 確認自定義字體文件的路徑和命名是否正確。

2. 在字體文件引入時，加入多種兼容格式，如下所示：

@font-face {
font-family: 'myFont';
src:url('font/myFont.eot'); /* IE9以下 */
src:url('font/myFont.eot?#iefix') format('embedded-opentype'), /* IE9以下 */
url('font/myFont.woff') format('woff'), /* chrome、firefox */
url('font/myFont.ttf') format('truetype'), /* chrome、firefox、safari、opera */
url('font/myFont.svg#myFont') format('svg'); /* iOS */
font-weight:normal;
font-style:normal;
}

3. 對于一些老版本的瀏覽器，還可以引入基于Flash的解決方案。

總之，正確引入字體文件和兼容多種格式是保證自定義字體圖標顯示正確的關鍵。