Fontawesome 图标未显示
[英]Fontawesome icon not showing
问题描述
I'm trying to develop an angular project completely on my mobile device.
我正在尝试完全在我的移动设备上开发一个 angular 项目。 I tried using fontawesome icon in my project.我尝试在我的项目中使用 fontawesome 图标。 While using the minus-square icon, it worked without even creating an account.使用减号方形图标时，它甚至无需创建帐户即可工作。
<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>
Now I'm trying to use temperature icon and weather icon.现在我正在尝试使用温度图标和天气图标。 It seems like I need an account for that, so I did.似乎我需要一个帐户，所以我做到了。
<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>
This doesn't shows icon at all.这根本不显示图标。 I tried the same minus-square icon it worked, but this doesn't working.我尝试了相同的减号方形图标，但它不起作用。 These icon working at https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-temperature-high&unicon=f769 Completely fine.这些图标在https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-temperature-high&unicon=f769 上工作完全没问题。 Help me.帮我。 I'm on mobile device working on Angular.我正在使用 Angular 的移动设备。
1 个解决方案
解决方案1
0 2020-09-11 22:03:55
The link to the 2pe7bfe2cy.js file on your code returns Access Denied to me.代码中指向2pe7bfe2cy.js文件的链接向我返回拒绝访问。 The w3schools example uses a different URL (to the a076d05399.js file): w3schools 示例使用不同的 URL（指向a076d05399.js文件）：
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
Updating your code with the 2nd file works on Chrome for macOS:使用 2nd 文件更新您的代码适用于 Chrome for macOS：
<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>
The a076d05399.js file says "license": "free" , which includes both icons you mentioned. a076d05399.js文件显示"license": "free" ，其中包括您提到的两个图标。 Perhaps you missed a step on account creation?也许您错过了创建帐户的步骤？
Alternative : considering it works here on this example, this could be a configuration issue.替代方案：考虑到它在此示例中有效，这可能是配置问题。 Since you're using Angular, Font Awesome has an official Angular component .由于您使用的是 Angular，Font Awesome 有一个官方的 Angular 组件。 Docs says:文档说：
If you are using Angular, you need the angular-fontawesome package or Web Fonts with CSS.
Did you try installing the angular-fontawesome package ?您是否尝试安装angular-fontawesome 包？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.