Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
HELP: Icons Not Working On My Phone
#1
Hello World
I recently noticed all icons in my HTML + CSS page is not showing. Initially I was using font-awesome icons, which I got the CDN link from w3schools (the one that does not require downloading or installation) and it was working fine.

After a while, can't tell the specific period, I noticed that all icons are not displaying. I checked my header file if the font-awesome link is still there which was confirmed, but yet no icon is displaying.

I opened a new document and include the font-awesome link, try one icon (and several other) but not displaying.
You can check the attachments below, the black rectangle shown is all that is displayed.

Then I try Google icons and bootstrap, using their CDN link, all to no avail.
As a newbie, the icons are one of the few things that make my page look a bit nice.


Attached Files Thumbnail(s)
       
I am a proud member of NIgerian Coders Team
#2
First things first: CDN means Content Delivery Network. All resources hosted on a CDN can only be accessed when there is an internet connection.

So, you'll notice that the specified source of font-awesome on your page is a CDN. Your icons will be shown only when your page is hosted online and accessed using an internet enabled device.

If I am to guess, I would say that you are creating your pages from a local environment (not online). Therefore, all resources (assets) you'll need to use MUST be pulled from within your local environment. By this i mean, download the font-awesome project and then use the font-awesome.min.css file as the source, instead of the specified CDN link.
Always try not to spend tomorrow regretting what you should have done today! Smile
[-] The following 1 user Likes Laive's post:
  • Hackinubee
Reply
#3
@laive said it all.
It takes so long to learn simplicity.
Reply
#4
(02-12-2019, 06:02 AM)Laive Wrote:
First things first: CDN means Content Delivery Network. All resources hosted on a CDN can only be accessed when there is an internet connection.

So, you'll notice that the specified source of font-awesome on your page is a CDN. Your icons will be shown only when your page is hosted online and accessed using an internet enabled device.

If I am to guess, I would say that you are creating your pages from a local environment (not online). Therefore, all resources (assets) you'll need to use MUST be pulled from within your local environment. By this i mean, download the font-awesome project and then use the font-awesome.min.css file as the source, instead of the specified CDN link.


Experience is the best teacher!!!
W3schools teach me that using the CDN format is good for practice since it does not require any downloading or installation, also it is better to use it when pushing your project online since it delivers faster.

Moreover, this thing is working before without data self!

Thanks for the advise bro, I will go and use the download method and give feedback.
I am a proud member of NIgerian Coders Team
[-] The following 1 user Likes Aphatheology's post:
  • Laive
Reply
#5
Thanks again @laive

I tried the latest link from font awesome website, I noticed it works while my data is on (using WiFi though) and not working when not on data.

You can check the attached screenshot
I have download the file now, will be using that now!


Attached Files Thumbnail(s)
       
I am a proud member of NIgerian Coders Team
[-] The following 1 user Likes Aphatheology's post:
  • Laive
Reply
#6
(02-12-2019, 12:55 PM)Aphatheology Wrote:
Thanks again @laive

I tried the latest link from font awesome website, I noticed it works while my data is on (using WiFi though) and not working when not on data.

You can check the attached screenshot
I have download the file now, will be using that now!

Got the gist, right? And that's how we all learn! Have fun designing and styling your pages! Smile
Always try not to spend tomorrow regretting what you should have done today! Smile
Reply
#7
Tired!!! I'm publicizing the work I'm doing tomorrow, for now; I GIVE UP ON USING ICONS!!!
I am a proud member of NIgerian Coders Team
Reply
#8
@laive I'm tired of this shit!!!
I vex use all the possible files to make it work at once (after trying them separately) and yet the icons did not work!


Attached Files Thumbnail(s)
   
I am a proud member of NIgerian Coders Team
Reply
#9
(02-17-2019, 04:16 PM)Aphatheology Wrote:
@laive I'm tired of this shit!!!
I vex use all the possible files to make it work at once (after trying them separately) and yet the icons did not work!

Take it easy bro... It takes time to understand how these things work. Remember you did not learn to speak your native language in just one month.

To resolve this, we need to know how your website folder is structured. This way, we will know how to reference your asset files.
Always try not to spend tomorrow regretting what you should have done today! Smile
Reply
#10
(02-18-2019, 02:23 PM)Laive Wrote:
Take it easy bro... It takes time to understand how these things work. Remember you did not learn to speak your native language in just one month.

To resolve this, we need to know how your website folder is structured. This way, we will know how to reference your asset files.


Those files I href are in the same folder with where the HTML file is, that's why the href is like that... Going to school soon, want to set everything up before then, if the problem persist, it is either I return to CDN (which require data) or I forget about icons for now
I am a proud member of NIgerian Coders Team
Reply
#11
(02-18-2019, 06:23 PM)Aphatheology Wrote:
Those files I href are in the same folder with where the HTML file is, that's why the href is like that... Going to school soon, want to set everything up before then, if the problem persist, it is either I return to CDN (which require data) or I forget about icons for now

Alright, then ensure you follow these instructions:

1. DO NOT REMOVE any file from font-awesome folder. All files in the folder are dependent on each other.

2. Link the font-awesome.min.css file directly from the font-awesome folder. Link it like any CSS file. Example:

Code:
<link rel='stylesheet' href='font-awesome/css/font-awesome.min.css' type='text/css'>


3. Place the above reference in the head section of your HTML page. This is VERY important.

And also, for the example above to work, remember to place the font-awesome folder at the same level with your pages.

Hope this helps! Smile
Always try not to spend tomorrow regretting what you should have done today! Smile
[-] The following 1 user Likes Laive's post:
  • Aphatheology
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  HELP: Mybb Forum Not Working On Freebasics clivequentin 9 515 09-20-2017, 01:49 PM
Last Post: Dynamo
  FIXED: Working Rss Feed For Pbnl Needed Itz Netministar 15 1,790 06-23-2016, 07:02 PM
Last Post: Itz Netministar
  Working Accurate Calculator Script V1.3 like Cleduport stardopple 4 499 06-18-2016, 04:55 PM
Last Post: Aphatheology



Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links

              Advertise