Fontawesome图标未显示

问题描述

我正在尝试完全在移动设备上开发一个角度项目。我尝试在项目中使用fontawesome图标。使用减号图标时,它甚至无需创建帐户即可工作。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<button id="remove" class="fa fa-minus-square"></button>

现在我正在尝试使用温度图标和天气图标。看来我需要一个帐户,所以我做了。

<head>
<script src="https://kit.fontawesome.com/2ee7bde2cf.js">
</script>
</head>
<body>
<h3>Day Summary</h3>
<hr>
<i id="weather" class='fas fa-cloud-moon'></i>
<h2>Cloudy</h2>
<i id="temperature" class='fas fa-temperature-high'></i>

这根本不显示图标。我尝试了相同的减号图标,但没有用。 这些图标在https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-temperature-high&unicon=f769工作 完全可以。 帮我。 我在使用Angular的移动设备上。

解决方法

代码上指向MPI_BOTTOM文件的链接向我返回拒绝访问。 w3schools示例使用其他URL(指向2pe7bfe2cy.js文件):

a076d05399.js

使用第二个文件更新代码可在适用于macOS的Chrome上运行:

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

<head> <script src="https://kit.fontawesome.com/a076d05399.js"> </script> </head> <body> <h3>Day Summary</h3> <hr> <i id="weather" class='fas fa-cloud-moon'></i> <h2>Cloudy</h2> <i id="temperature" class='fas fa-temperature-high'></i>文件显示a076d05399.js,其中包括您提到的两个图标。也许您错过了创建帐户的步骤?


替代:考虑到此示例在这里可以正常工作,这可能是配置问题。由于您使用的是Angular,因此Font Awesome具有official Angular component。文件说:

如果您使用的是Angular,则需要angular-fontawesome软件包或 具有CSS的网络字体。

您尝试安装angular-fontawesome package吗?