So I am developing a site at http://www.johnkimwell.com/Vetel/ and one problem I have is that the font awesome icon is not loading and is only showing a square. I checked everything including the css and I dont see any possible conflict.
I hope you guys can help me out.
Thank you
Strange, indeed. I checked out your website and I found out that you are using FA v. 4.2.0, most of my websites use 4.7.0 so before doing anything else, replace your link element for font-awesome.css for this :
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Perhaps you are using a too old version. Other than that, I checked your headers, console log, everything seems fine.
Hope it helps!
The .fa::before class from Font Awesome appears to be overridden by simple-line-icons. I unchecked the first property in the image below, causing the search icon to be displayed. If you are not using simple-line-icons, the easiest fix would be to get rid of
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
Image of how I fixed the issue
Related
I am trying to use Roboto for a text-based logo and have the necessary code to load the font in <head>. While the site is loading, you can briefly see the logo in an ugly default font before becoming properly formatted in the web font. The logo literally grows bigger and then smaller. Is this type of problem indicative of poor code implementation or is something else the problem?
I am happy to upload the relevant code portion if the question cannot be answered generally.
One option would be to tell the browser to preload your fonts.
Here is an example:
<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">
If you’re using a CDN like Google Fonts (Roboto), be sure that the font files you’re preloading match the ones in the CSS, or you could end up downloading two versions of the same font.
Hope this helps!
I've downloaded font-awesome icons in my project and imported font-awesome.min.css as
<link rel="stylesheet" href="resources/font-awesome/css/font-awesome.min.css">
And used them simply like
<i class="fa fa-user-o" aria-hidden="true"></i>
The stylesheet was loaded so there was no problem with the path.
The icons worked fine in Firefox, but didn't show up in Chrome 61 at all, neither in Win 10 nor Linux, so I guess it has nothing to do with OS.
I don't have any plugin in Chrome that would be conflicting.
I've also tried <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> but nothing changed.
Does anyone know what might cause this problem? Thanks!
I'm having this exact same issue. I tried re-downloading the fonts and the css, rewriting my css into a new file, removing some of the scripts and tags in the head tag and nothing works. It seems to be related to Chrome 61. I was going to report this to the FA's github, but it looks like someone already did.
Forgot to mention, I'm using Polymer. And here is a solution I found.
install polymer-font-awesome with npm:
npm i polymer-font-awesome
add the following dependency to polymer.json:
"extraDependencies": ["node_modules/polymer-font-awesome/dist/fonts/*"]
import these two files:
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-face.html">
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-awesome.html">
include stlye module:
<style type="text/css" include="font-awesome"></style>
Clear the cache in Chrome and it worked for me.
If you have any kind of AdBlock turned on, you need to disable it first.
I also have the same problem that font-awesome icons appear in Firefox but not in Chrome, and I figured out that my Chrome AdBlock blocked it.
I meet problem that fontawesome Icon does not show up on Chrome. ( Safari and Moz both works fine ). Does anyone have a clew why this happened. Thanks All.
Here is the Snapshot:
I know that the default font path that fontawesome.min.css directs ../font/......, but I have changed path name to " ../fonts/ " for my project, still doesn't work. The icon never shows up.
Check if you have your Adblocker disabled. Sometimes chrome extensions can prevent the browser from showing the icons.
Is bootstrap working? It looks like your Css directory is capitalized which would cause your reference to the css file to not work.
Try replacing
./css/font-awesome.min.css
with
./Css/font-awesome.min.css
As mentioned in the comment on your original question, you could try using the CDN momentarily to see if the icon appears. If the icon does appear using the CDN, you know you have an issue with your path like I have mentioned above.
Here is the html code you would use for the CDN (version 3.2.1):
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Aside from this, you are also using an outdated version of font-awesome. If possible in your circumstance, I recommend upgrading to the latest version. You can find more information on the latest version by visiting the following link.
http://fontawesome.io/get-started/
If you are going to use the latest version, make sure to look at examples as they have changed the way you write the html code.
Edit after updating Font-awesome:
If you are going to use the latest version of font-awesome, you need to change the HTML code to
<i class="fa fa-times" aria-hidden="true"></i>
CDN for the latest version (4.7):
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
I had a similar issue, and I resolved it with these steps:
Open your font-awesome.min.css file
Search for webfonts, which is the default parent folder name of the fonts. If you found a bunch, then replace each of them with the name of your fonts folder in your project.
...This way, the font references inside your ..min.css points to the correct directory path where your fonts are :)
I found out this out by opening chrome dev tools in incognito mode, and looking at the console errors.
Disable the plugin: "Font Changer with Google Web Fonts™"
I guess it comes as a default tool.
There must be multiple css files.. You should include all.min.css (or) all.css as it works well
Its because you need to provide the exact version of font awesome in the link tag of index.html .
For me it was:
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
you can also visit https://fontawesome.com/start and search for the exact version you need in your application
I just solved this problem on one of my own sites. Only some of the icons didn't work. fa-pencil and fa-trash, specifically, failed. fa-user-plus and fa-envelope worked fine.
I'm not sure precisely what was messing with it, but one of the other css files (maybe bootstrap) was messing with the FA css. I moved my link to the FA css so it came after the other css links in the page, and it worked. I now have pencil and trash icons.
You should disable adblocking plugins in chrome, they sometimes can mistake Fontawesome icons for advertising.
Just add brand.js, solid.js, fontawesome.js file from your fontawesome folder, it did work for me.
<script defer src="../fontawesome/js/brands.js"></script>
<script defer src="../fontawesome/js/solid.js"></script>
<script defer src="../fontawesome/js/fontawesome.js"></script>
I'm going crazy with this issue. I want to show 8 icons on a page, but only 4 of them are showing up. I have looked up this for help, but I got nothing useful. I checked also on StackOverflow but didn't get anything useful either.
The full code is here.
And this is how I see the icons:
I get this in localhost and uploaded it to altervista. I get this with Chrome, Firefox and Vivaldi. I get this with local fa files and with the CDN. The icons that aren't visible are missing the :before but I don't know why. Can someone help me?
You are using icons (e.g. fa-thermometer-half or fa-free-code-camp), which were introduced in version 4.7. However in your website, version 4.6.3 of FontAwesome is included (see here). So, update your FontAwesome instance to the newest version to solve your problem.
In my case the problem was that in CSS I was doing:
.icon:before {
font-family: "Font Awesome";
}
while it should be:
.icon:before {
font-family: "Font Awesome 5 Free";
}
Getting even a single character different causes some of the icons to disappear. Terrible thing.
Hope this helps.
Please use the latest version of Font Awesome or copy this code into your head section.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
You can replace your existing link to Font Awesome CSS using this CDN provided by Bootstrap CDN, and see the magic.
CDN: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
I am making a simple HTML webpage, I am trying to add an icon in the browser tab, I can get the icon to appear if I use a picture from online. However when I try to use a local file the icon is not visible. Here is what I used to try and embed the icon
<link rel="icon" href="/icon.ico">
Any help is appreciated, thanks
Your code works in recent Firefox.
Maybe the problem is that leading slash in the path makes browser search it in server root directory?
<link rel="icon" type="image/vnd.microsoft.icon" href="icon.ico" />