Everything works fine with other icons, using the I class HTML, but when I use fa fa fa-shopping-bag per the Font Awesome website's code for that icon, it doesn't show.
I just had the same problem. "font-awesome" was included as part of a package from which we base our website. Specifically, we use BV Commerce which is developed in asp.net. There is a master file which contains the link to font-awesome. You should just have to update the version number in your link to font-awesome.
Since the version may change, first go to the font-awesome website and look at the footer. The current version number is displayed there.
Next change the version number in your link. The current link at the time of this post is
`<link href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />`
This fixed my problem.
If you have multiple master files, you will need to search your whole solution for all references to font-awesome.
Hope this helps.
Here is the issue, if you are using a local CDN of font-awesome then somehow your fa class changed to icon so you have to use both fa and icon.
try this fa fa fa-shopping-bag icon icon icon-shopping-bag.
If local CDN
Edit your location of font-awesome file as well.
#font-face{font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
Download the fonts as well.
these all are the solution if you are using the CDN from local.
Related
I have a single spa application with a root-config, a styleguide, and a couple of react applications. All of these application are generated using the yarn create single-spa command.
I tried creating a kit from the font-awesome website and adding it to the root-config index.ejs inside the head tag.
Then I tried adding <i className='fa-brands fa-facebook-f' /> in one of my MFEs.
The loaded index.html in my browser include the tag code. But it's dimensions are 0x0.
You are missing some styles.
When you generate your kit, the font awesome website shares a snippet of the script tag for your kit.
You need to place it in the head section of your root-config.
But that's not all. You also need to add some font-faces.
The same page (with the snippet) also has a link to download example html file.
If you check that file it has extra style tags.
Once you add those to your root-config, the icons will start showing up.
This issue is not single-spa, it's the confusing documentation for font-awesome.
I am building a site from a jekyll theme. I was able to completely customize the whole site except the yellow icons in the picture. These weren't found in the site files. Nowhere. Inspecting that element just shows a div class. I need to remove these but I can't because I can't find them anywhere.
These icons are actually font. To remove them you will have to remove specific classes from the element. In this case for example if you want to remove Laptop icon, you would remove fa-laptop class from the i element.
You can read more about it on the following link Font awesome - Get started
Can you search for a file called font-awesome.min.css in your project root directory? These icons should be a reference from that file. You can modify the mappings to point to something else.
Font awesome is service provide free/paid icons, and sometime we feel like to use it offline as part of our own project to remove dependency from network resource.
but how? sometime we think we followed all steps mentioned in article by them but we miss something. and that why I write this q&A.
How to use Font Awesome offline?
As of writing this answer, the latest version of Font Awesome is 5.15.4
Following the Font Awesome documentation on Hosting Font Awesome Yourself
Download the free version of Font Awesome from here
Extract the downloaded package
Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory.
Add a reference to the copied /css/all.css file like the below code into the <head> element of each template or page that you want to use Font Awesome on.
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
Now you can start using the font awesome icons locally in your project <i class="fas fa-user"></i>
Follow first their article: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
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.
After then do this.
#font-face{
font-family:Font Awesome\ 5 Free;
font-style:normal;
font-weight:900;
src:url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.eot');
src:url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.eot?#iefix') format("embedded-opentype"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.woff2') format("woff2"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.woff') format("woff"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.ttf') format("truetype"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.svg#fontawesome') format("svg")
}
I am using Font Awsome Version 4.7.0.
Currently, I need to get Viber Icon but it is not available in the above-mentioned version.
I am not able to upgrade the Font Awsome version since it can affect to the whole system.
Is there a way to include Viber icon to the existing version.
I found the solution by myself.
I could find the below-mentioned repository which includes all the necessary CSS and font files generate the Viber icon.
I just needed to import additional Font files and CSS files related only to Viber Icon and import the CSS file.
Repository : http://kukac7.github.io/fa-viber
I've been using Font Awesome for a little while now, and was updating to 4.0 today. I decided to use the BootstrapCDN this time, and I've run into problems. The icons aren't being displayed despite using the new class names.
The CSS file is getting pulled down fine, but when I look at developer tools in Chrome the fonts aren't being served. Based on the relative path to the font within the CSS file (src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');), I was able to test the link and download the font:
http://netdna.bootstrapcdn.com/font-awesome/4.0.0/fonts/fontawesome-webfont.eot?v=4.0.0
So the link is correct (of course). Anyone know why the font isn't being served?
You have to do more than just use the new class names. Did you make sure that you added the fa class as well?