I wanna use the font awesome icons offline in webpage but it is not happening dont know the exact reason as my code goes here
<html>
<head>
<title>font-awesome example</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>
this is example about font-awesome<i class="fa fa-bell"></i>
<br>
this is not working
</body>
</html>
please any one put me on right way to get font awesome on my page
Have you downloaded the fonts folder as well?
All the font awesome icons are included in font files which the browser expects to find in a directory called 'fonts'.
If you've only included the css file the page won't find the actual fonts and the icons won't load.
I faced similar issues. I realized I just went straight to copying the target CSS file path front the font awesome icons which doesn't display. Just the box outline.
Solution is copying the whole folder you extracted after download to your work (HTML/CSS) portfolio and access the target fontawesome.CSS or all.CSS file using the './' file path access. It will work like it's online. Good luck.
The /css/all.css file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.
Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).
Add a reference to the copied /css/all.css file into the of each template or page that you want to use Font Awesome on.
visit - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Related
Font awesome 5.13.0 not showing icon when including only all.css in gulp project but when i include all.js as well it displays the icon but the i tags are converted into svg. Need help please.How can i make it work without converting it to svg.
Folder structure:
this is how i've included fontawesome
I checked file in dest folder as well and the fontawesome css are present n that fiile.
but the cons are not being dislayed.
updated folder structure
how it should be displayed
How it is being displayed
Here's a working sample with CSS only. If it doesn't work for you, please provide more details.
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet"/>
<i class="fas fa-plus"></i>
Found the issue. Actually i was just adding webfonts folder to assets folder but i missed to add a gulp task to migrate the files of webfonts folder. So the all.css file was unable to find the webfonts files and thus the icons were not showing up.
Take away here for me (as well as who don't know about this dependency)-
The in addition to all.css, files in webfonts folder is also also required in order for font awesome to work as expected
I want to show user circle icon, I have download a font-awesome css file with version 4.7.0.
But this is not working for me. If I use cdn then its working. I am not getting what is the issue in downloaded file.
Here my code:
<html>
<head>
<link href="font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<i class="fa fa-user-circle-o"></i>
</body>
</html>
Does anyone know what is the issue?
There is no problem with body part of HTML. Surely, it has to be with font-awesome.min.css or its path.
There are two ways to go about this problem:
font-awesome.min.css may not loaded along with your HTML. Check in network tab of chrome DevTools. The path you have provided indicates chrome to look for the CSS file in same directory as the HTML file.
Alternatively, you can provide cdn link for font-awesome.min.css, if you dont want to maintain the CSS by yourself. For this, change link tab in head to below:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
You have to host the font files too. Go to the fontawesome website and read the related documentation.
Font awesome get started
As you can understand from it's name, Font-Awesome has cool font-based approach to use icons. So, including CSS file is not enough. If you want to store your CSS file locally, you should store font files too.
As documented, you should have entire folder (including fonts folder which includes woff, tff etc) on your server.
Copy the entire font-awesome directory into your project.
In the of your html, reference the location to your font-awesome.min.css.
I have got a website built in CakePHP and hosted on http://thecontrolist.azurewebsites.net. I am using git to update this website. I am using Coco theme which uses Fontello, Font-Awesome and a few other to create CSS icons in admin panel. When I pushed my work first time, the font's wont show on the live server however they show fine on my localhost/wamp server.
I thought there would have been some kind of file corruption while pushing font files through git. Hence I decided to upload font files in Fontello and Font-awesome using FTP. I hard refreshed and it worked. However, after some time it again stopped working.
I add the entire libs directory of the theme to gitignore list and uploaded all fonts in question using FTP once gitignore had been pushed. But it didn't fix the issue and fonts have stopped showing up again, so the gitignore didn't help. Any ideas what's going on?
Following the code:
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/fontello/css/fontello.css" />
And you can view the files from linked. One thing I am very sure about is that when I reupload files using FTP and refresh it works but then it stops working automatically after some time so it does not seem like a font filepath issue.
Just don't use buggy fonts. Use more stable fonts like font-awesome.
I've looked at several posts on here, and I've done further research online, but I can't see to find the problem.
I put the favicon.ico in the main directory, but it's not showing up on any browser. I've tried it personally on Firefox and Safari, and I've tried the rest on Browsershots.
I also have this line in the head of the html:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
I've also tried it without the type..., as I have it on other pages on the same server.
This website doesn't show its favicon (thistle)
This website does show its favicon (greenman)
Two of my sites on the same server with the favicon in the same place of the site's directory. ??
The only thing I can figure is there was a problem converting the ico online and saving it on my MacBook Pro before uploading it to the server?
Any help or hints or thoughts are greatly appreciated.
Had the same problem. Found this great answer: https://stackoverflow.com/a/16375622/5359989
What worked for me was changing 'favicon.ico' to something unique such as 'myfavicon.ico' and referencing it in the html accordingly. Hope this works for you also.
Change this:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
To this:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
Another reason why your favicon is not shown could be because you're viewing a cached version of your site.
Clear your cache and open the site again and you will see the favicon.
Chrome didn't like the fact my favicon.ico was a 64x64 image. I changed it to a 32x32 pixel image and it showed right up!
You're using a relative path in your href="" attribute. Change it to a root-relative path /favicon.ico or an absolute path http://yoursite.com/favicon.ico.
Not all icons are the same! I had this problem for a while and could never figure out why some browsers didnt show the icon. I knew with absolute certainty that the file existed where the link tag said it did. Eventually I discovered that, at least for Chrome and Opera, they WONT display some icons depending on the formats within the .ico file.
E.g. a .ico that has, only, 64x64 and 32x32 and 16x16 formats will display.
BUT a .ico that also has, IN ADDITION TO those above, 512x512 256x256, 128x128 and 48x48 formats, will NOT display.
That really looks like a browser issue but its curious that it affects more than one browser.
Anyhow the solution, for me at least, was to only include 64x64 and 32x32 and 16x16 formats.
I had the same issue but solved it in the following way.
In w3schools at the "HTML favicon" section it says:
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
In my case I had a project in express.js. In express one sets the root directory of static files with the command:
app.use(express.static('public'))
In my project, "public" seemed as the root directory for all my static files. So, I just had to add a folder named "image" inside "public" where I saved my "favicon.ico". Finally I linked the icon in my main template html file according to my project's directory tree:
<link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
Notice that I don't have to refer to the public folder because it is set as root by my framework.
In summary I think that if one uses a simple html project with vanilla js the w3schools' guideline is straightforward. But, if you're using a framework like express, Django etc. you have to think carefully how does your framework serve your static files.
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
Solution:
Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.
For more info:
URI starting with two slashes ... how do they behave?
Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ta-daa!
What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -
$python -m SimpleHTTPServer
Then, go to your browser and go to 127.0.0.1:8000
If it doesn't show up, try changing the homepage of your website to index.html