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
Related
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 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 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
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.
Dear fellow designers/developers
I have created 8 extra glyphicons for my bootstrap website. Uploaded them to icomoon and downloaded them as font, this all works perfect.
I am able to add my font to my CSS and use it in HTML withou any problem, but I want to use the font as extra Glyphicons.
How can I do this?
refer to this website which provides the font icons to bootstrap
Font-Awesome
download fontawesome here fontawesome.io
add css file link to your page
<link href='/path/to/font-awesome.css' rel='stylesheet'/>
use css classes mentioned in font-awesome.css stating with 'fa-'
example: <i class="fa fa-desktop"></i>
please copy css and fonts folders to same folder
Steps to use font-Awsome
Download Font-Awsome
Extract .zip file
after extracting, you will get folder i.e. font-awesome-4.5.0
Add this folder by drag and drop to your content or bootstrap folder
Add font-awesome.css file as a reference in your web-page
<link href="~/Content/font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet" />
get icons as told by #G Ravinder i.e.
<i class="fa fa-desktop"></i>
<span class="fa fa-desktop"></span>
That's all :-)