Primeng图标显示异常：与官方示例及预期效果不符

排查与解决步骤 #

• 确认PrimeIcons样式已正确引入

  1. 确保已安装依赖：npm install primeng primeicons
  2. 在全局样式文件（如styles.scss/styles.css）中导入图标样式：

     @import "primeicons/primeicons.css";
     

     若为Angular项目，也可在angular.json的styles数组中配置：

     "styles": [
       "node_modules/primeicons/primeicons.css",
       "src/styles.css"
     ]
     

• 修正HTML代码中的类名错误
  你的<span>标签类名前有多余空格，导致样式匹配失败，修正后代码：

  <i class="pi pi-info-circle" style="font-size: 2rem"></i>
  <span class="pi pi-info-circle"></span>
  

• 检查字体加载是否正常
  打开浏览器开发者工具（F12）→ Network → 筛选Fonts，确认PrimeIcons字体文件（如primeicons.ttf）已成功加载。若加载失败，重新安装依赖或检查路径配置。

• 解决全局样式冲突
  若自定义全局样式覆盖了PrimeIcons的默认样式，可通过开发者工具检查图标元素的font-family是否为'PrimeIcons'。若被覆盖，添加优先级更高的样式：

  .pi {
    font-family: 'PrimeIcons' !important;
  }
  

内容的提问来源于stack exchange，提问作者bob2 habanay