如何解决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吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。