使用<fa-icon [ icon ]="faCoffee">元素时如何更改Font Awesome图标的颜色

使用Font Awesome图标时，可以通过以下方法更改图标的颜色：

使用CSS样式：可以通过在图标所在的HTML元素上添加CSS样式来更改图标的颜色。例如，使用color属性来设置图标的颜色，可以选择使用十六进制颜色值、RGB值或者CSS内置的颜色名称。

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-coffee fa-stack-1x fa-inverse" style="color: red;"></i>
</span>

在上面的示例中，style="color: red;"设置了图标的颜色为红色。

使用Font Awesome提供的样式类：Font Awesome还提供了一些预定义的样式类，可以用来更改图标的颜色。例如，可以使用.text-primary类来设置图标的颜色为主题的主色，使用.text-success类来设置图标的颜色为成功的颜色等。

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-coffee fa-stack-1x fa-inverse text-danger"></i>
</span>

在上面的示例中，.text-danger类设置了图标的颜色为危险的颜色。

使用CSS伪元素：可以通过CSS伪元素来更改图标的颜色。通过为图标的父元素添加CSS样式，并使用::before或::after伪元素来选择图标元素，然后设置color属性来改变图标的颜色。

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-coffee fa-stack-1x fa-inverse"></i>
</span>

<style>
  .fa-stack .fa-coffee::before {
    color: blue;
  }
</style>

在上面的示例中，.fa-stack .fa-coffee::before选择了图标元素，并将其颜色设置为蓝色。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络）可以加速网站的访问速度，提供了全球覆盖的加速节点，帮助用户更快地加载和传输静态资源。相关产品介绍链接地址：腾讯云CDN。