So i had to switch from an older version of Font Awesome to the newest version because the custom icons weren't showing up on my android phone. I heard that the 3.2.1 version fixed this issue, so i started using that. For example, previously whenever i wanted to attach an icon to a button, it would be like this:
Button Name
However after the update, when i use data-icon="user", it just replaces the icon with a plus.
I've surfed through the font awesome github to see if anything on there would help. So now i'm here, still wondering what is different with the newest version.
<a href="account.php" data-role="button" ><i class="icon-whatevericonyouwant></i>Button Name</a>
Related
I am trying to put some font awesome icons on my site. But google chrome doesn't show icons of fontawesome.com
I have tested with other browsers, it works fine.
I have imported the link of fontawsome CDN in the head tag.
I have also put the tag of icons to show.
There's no adblocker and any extension that blocks icons.
I have tested with chromium browser, same problem with that browser.
I haven't used any extension for chromium.
Note: I am on the latest version of the Chrome browser and also imported the latest version of fontawesome.com
Chrome: Version 74.0.3729.169 (Official Build) (64-bit)
Font. version: 5.8.2
P.S.: It's working fine on another laptop of my friend, but not working in my mine. Please figure out the problem.
link
Here's the link of jsfiddle for code:
<!-- Font awesome 4 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- The code for icon -->
<div class="icon-container">
<i class="icon far fa-gem"></i>
</div>
Please check the screenshots:
I'm using the same version of Chrome and that fiddle displays as expected (far-gem is shown). So I don't think it is a FA-issue or a Chrome-issue. Possibly some addins are causing trouble.
I had the same issue with icons not appearing on Google chrome on my mobile phone but worked fine on my laptop.
I solved the problem by clearing my browser cache. Have you tried this?
I don't know why my browser cache prevented icons from loading or if that could also be a problem for any of my site's visitors - if anyone can explain this, or has a way to ensure this issue doesn't affect my site's visitors, that would be really helpful.
I am using id-card icon of font awesome.
<i class="fa fa-id-card"></i>
The icon is even listed on Font Awesome's Official Website but still doesn't seem to work, it just shows the blank box.
Assuming you are referencing locally and not using their CDN.
Check to ensure you have version 4.7 of Font Awesome referenced in your code. Those icons are new to that version.
Try this code for the address card icon.
Above code is work in font awesome 4.7.0 css
For some reason, I can't seem to get the Slideshare icon (f1e7) to work.
Every other icon in the font seems fine - and I made sure my installed fonts were all from the latest 4.2 archive.
Any ideas?
TIA,
Adam.
I'm having the same issue currently. I think this may be an issue with the font files, because when I comment out the sources so only the .svg is used, the icon shows up fine.
Until the issue is resolved, I would recommend using the .svg of the slideshare icon, and implementing it using icomoon.
I have a problem using the Bootstrap 3.1.1 Glyphicons.
In Google Chrome, the Icons are working fine.
But in Firefox, some icons are displayed, some are not.
For example:
<span class="glyphicon glyphicon-log-in"></span>
Should display the "log-in" glyphicon.
In Chrome the Icon is displayed, in Firefox it is not.
<span class="glyphicon glyphicon-folder-open"></span>
Should display the "folder-open" glyphicon.
In Chrome the Icon is displayed, in Firefox it is displayed, too
Google told me, that Firefox might have a problem with importing the font files from a different server, but I have them located on my web server. Since some Icons are displayed in Firefox and some not, I don't think the Problem is within file access troubles.
The funny thing is, then I visit the Bootstrap Components Website, EVERY glyphicon (even the ones, my Firefox won't display on my website) are displayed correctly by Firefox.
Since the glyphicons on the Bootstrap Components Website work fine in Firefox, I compared the MD5sums of the files used on the Bootstrap Components Website and the Files I received via the bower download of Bootstrap. The checksums are equal, so I think I don't have corrupted files.
Any ideas?
UPDATE:
OS => OpenSuSe
But I found the problem:
After deleting the fonts from my server, they there somehow still displayed on the website.
Chrome Console and Firebug did not tell me where they come from, but a network sniffer showed me, that I somewhere include a CSS from a foreign server.
After a search over my project, I found this CSS import in a third party bootstrap add-on.
Deleted the line and now my local fonts are used, and all the icons are displayed correctly.
Sorry for bothering you, should have had the idea to check a network sniffer for possible includes called from third party extension earlier.
I've been struggling for hours now, to figure out why font-awesome isn't functioning properly. I used the Font Awesome Wordpress plug-in. It works for the majority of the browsers, however Firefox is showing only a few characters.
It's the magenta menu on this website: http://www.babystuf.nl. (the blocks in the left sidebar) I tried everything (updates to Font awesome 4.X without the plugin, added .htacess in the /font folder, changed the .. /fonts/ path to a static path). Without succes.
Weirdest thing is, that we run a copy of that same website (http://www.baby-wereld.nl) and it's working fine there! Different server, same WP version, however with less plugins than babystuf.nl.
Who has an idea on how to fix this?
Thanks! M
UPDATE: It turned out that we used the All In One Event Wordpress plug-in, that uses Font Awesome as well… And that's a older version than 3.2.1. Only Firefox loaded that font set…
I had this problem. I thought I had tried EVERYTHING (htaccess, changing file paths, playing with permission, etc) but it turned out I had previously tried to use a Font Awesome plugin in my wordpress installation and Firefox was picking up this older version of FontAwesome. Disabling the plugin let the browser look for the files I had uploaded myself and the problem is now solved!