Question

我有一个使用相同图标的组件，它显示正常，而在此组件中未显示图标，仅显示带有图标代码的框。在浏览器控制台中未显示任何错误，并且已成功指定对CDN的请求，有人知道为什么不显示它们？这是代码：

        <div class="row mt-4">
          <div class="col-md-4 col-4 d-flex justify-content-center">
            <p class="text-center"> <i class="fas fa-bath fa-2x"> </i> <br> Cubículos: {{inmueble.cubiculoLocal}} <p>
          </div>
          <div class="col-md-4 col-4">
            <p class="text-center"> <i class="fas fa-hot-tub fa-2x"></i> <br> Area del Local: {{inmueble.areaLocal}} <p>
          </div>
          <div class="col-md-4 col-4">
            <p class="text-center"> <i class="fas fa-bed fa-2x "></i> <br> Altura del Local: {{inmueble.alturaLocal}} <p>
          </div>
          <div class="col-md-4 col-4">
            <p class="text-center"> <i class="fas fa-bed fa-2x "></i> <br> Fondo de Comercio: {{inmueble.fondoComercioLocal}} <p>
          </div>
        </div>

Answer 1

您应该在CSS内的样式中添加真棒angular.json

"styles": [
    "styles.css",
    "./node_modules/@fontawesome/fontawesome-free/css/all.min.css"
],

如果您使用的是CDN，请将样式表导入到index.html文件中

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

编辑：另外，请检查以确保您没有无意间更改了要在其中使用图标的字体系列。如果您将.fa项的字体系列更改为：FontAwesome，该图标将不会显示。

为什么在该角度组件中未显示字体惊人的图标？

1 个答案: