Jump to content

font awesome icons being really inconsistent


Recommended Posts

I'm pretty sure this is the correct forum to ask this, it's my first time posting outside of the PHP forums. I'm building (trying to build) a web app, it's pretty much a practice project so I'm not ready or able to invest in font awesome pro so I've been using their free icons.

The issue I'm inquiring about is the font-awesome.min.css file. I've used it in one file and am able to use a certain icon which is listed as a free icon, but I'm not able to get the icon to appear in other places that are linked to the same file. The icon in question is "fa fa-newspaper" icon, if that makes a difference. I can use it in one area of the app but not in another. I suspected I'm using 2 different font-awesome.min.css files. (the project started with a template that I have expanded and customized beyond recognition) but no matter how much I move them around and link them I can't get that one icon to work anywhere else on the app.

Nothing I find in searching around tackles this, and it seems like such a silly thing. So I'm wondering if anyone has any input or some knowledge/experience that could answer this question for me. (I'm aware that font-awesome probably has some dependencies so instead of linking to existing files I've tried to copy the file structure into it's own directory) That particular icon still doesn't work, it's not a matter of life and death but it's baffling. So I'm wondering if anyone can explain this to me. TIA

Link to comment
Share on other sites

12 minutes ago, requinix said:

It should be very easy to find out if you're using two different font-awesome files by checking if you even have two font-awesome files.

Is this site viewable somewhere?

yea, they're both font-awesome.min.css and probably not different. I don't see why they would be different, it just seems that way because I've literally got all the same files connected to the 2 different pages and I can't get the one specific icon to work on one page. It's even listed as free on their website, it's just that one icon and it's working on a different page so it's weird. I know it's not the exact theme of this specific forum but I thought there may have been an obscure bit I was overlooking. Literally everything is the same and it only works on one page.


The site isn't viewable right now, but when it is I'll gladly share it here as I've received so much help here

Link to comment
Share on other sites

9 hours ago, requinix said:


Get rid of one of them and see if that breaks a page. If it does, fix the page and see if that also resolves the icon problem.

Yea, I've done all that before even asking about it here. It was during that frustration that I remembered there's a CSS forum here. I'll try explaining it -

file A - is the one that shows the newspaper icon successfully on the one page.

file B is the one that won't show the icon

page B is the page I'm working on now that I want to use the icon again on

When I connected both file A and file B to page B nothing changes, still can't use that icon. When I commented out the import to file B to only use file A all icons disappeared. I started thinking about dependencies, so I just brought the entire css directory that enveloped file A into the directory of page B I'm working in. Now they all work except the newspaper one again. It's confusing and I see no reason for it. Because I'm working from a highly customized template I was thinking there may be some dependencies in action that I wasn't aware of, which brought me here. As far as moving and connecting files around, I've done it all for hours last night. The only thing I haven't done yet, intentionally is use the CDN link but that seems like running from the challenge and I'll use that as a last resort.


EDIT: I just double checked to see if what I said I did last night was accurate. If I move the font-awesome file from the directory that won't show the newspaper icon then it shows no icons.

If I move the one that works into the directory where I can't get the icon it still doesn't show that icon.

And if I remove the working one from where it is showing the icon then no icons appear. So the font-awesome files are affecting each directory the same with the exception of this one icon. It's baffling me

Edited by TechnoDiver
Link to comment
Share on other sites

Sorry about the double post, I  unintentionally hit submit after my last edit and it wouldn't let me edit again.

So if I exchange which directories each font-awesome.min.css file is in then the icon doesn't show up on either page, but if I put them back then the icon is shown on the page it was shown on. The file structure with all the possible dependencies are the same. I've no clue how to proceed getting this icon to display on other pages.

Again, it's not a matter of life or death but something I would like to tie up loose ends on

Link to comment
Share on other sites

Sounds like you have two conflicting versions of FontAwesome.

Get rid of one of those. It doesn't make sense to have two different copies. Figure out which is older and remove it, then fix the page it was being used be to work with the newer version.

The specific icon you're dealing may have been added or removed between those two versions. Check the online documentation/icon list to see what is actually available.

Otherwise I can't see what pages are working or not, I can't see what icons are working or not, I can't see what versions of FontAwesome you have or not...

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.