2

I'm trying to develop an angular project completely on my mobile device. I tried using fontawesome icon in my project. 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. Help me. I'm on mobile device working on Angular.

MiaKhalifa
  • 23
  • 5
  • 2
    Welcome to StackOverflow, @MiaKhalifa! I hope you find this community helpful and friendly and feel motivated to ask more questions and to contribute back. – Ricardo Sep 11 '20 at 22:22

1 Answers1

0

The link to the 2pe7bfe2cy.js file on your code returns Access Denied to me. The w3schools example uses a different URL (to the a076d05399.js file):

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

Updating your code with the 2nd file works on 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. 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. 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?

Ricardo
  • 3,696
  • 5
  • 36
  • 50
  • I just change the code to the file that I gave in the above code. I just edit the code now. I hope it wont give access deny now. I even tried using that working code but still no icon showing. As I told already the other minus-square icon is working but these other not working. @Ricardo – MiaKhalifa Sep 12 '20 at 06:16
  • I tried the new `2ee7bde2cf.js` file on both your code snippet and on on the w3schools code snippet and it shows the expected icons. – Ricardo Sep 14 '20 at 19:56
  • Thanks for reply. I'm working on Angular project and turn out I need to put it in the main html (index.html) file to make it work – MiaKhalifa Sep 15 '20 at 15:49
  • Cool! If this answer helped you solving your issue, you may consider marking it as accepted. Best regards! – Ricardo Sep 16 '20 at 00:52