如何在基于blur-admin的AngularJS项目中使用cryptocoins-icons包

嘿，刚接触npm和blur-admin遇到这种图标不显示的问题很正常，咱们一步步来排查解决：

• 第一步：确保已正确引入图标库的CSS文件
  npm安装包只是把文件下载到了node_modules目录，但项目还没加载它的样式文件。blur-admin是Angular项目，你有两种靠谱的引入方式：

  1. 在src/index.html里添加样式链接：

     <link rel="stylesheet" href="node_modules/cryptocoins-icons/webfont/cryptocoins.css">
     

     你可以先去node_modules/cryptocoins-icons目录里确认下webfont文件夹下的css文件路径是否正确，别写错了。
  2. 或者在angular.json的styles数组中添加路径：

     "styles": [
       // 保留项目原有的样式文件
       "node_modules/cryptocoins-icons/webfont/cryptocoins.css"
     ]
     

  改完之后一定要重启ng serve服务，让新的样式配置生效。

• 第二步：检查图标类名是否正确
  很可能是类名用错了！cryptocoins-icons的标准用法是基础类cc加上小写的币种标识，比特币的正确写法是：

  <i class="cc cc-btc"></i>
  

  你之前用的cc BTC是大写格式，这大概率是图标不显示的原因，换成小写的cc-btc试试。

• 第三步：排查Angular样式封装的影响
  Angular组件默认有ViewEncapsulation机制，可能会导致全局的图标样式无法渗透到组件内部。如果前面两步都没解决，你可以在组件的CSS文件里添加这段代码：

  :host ::ng-deep .cc {
    font-family: 'cryptocoins' !important;
  }
  

  这段代码会强制让组件内部识别到图标的字体样式。

• 第四步：清理缓存并重新构建项目
  有时候npm缓存或者旧的构建文件会搞出奇怪的问题，执行以下命令清理后重启服务：

  npm cache clean --force
  ng build --delete-output-path
  ng serve
  

内容的提问来源于stack exchange，提问作者Shubham Gupta