After spending hours going around in circles. I've reached a level of frustration where I need an outside perspective.
See this code here and how it produces exactly what should be expected.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<p class="fa fa-check-circle fa_custom"> Verified</p>
<i class="fa fa-check"></i>
Then if I enter this code within a Shopify liquid file.
The output is this:
Why isn't one of the icons showing?
I've made this demonstration to highlight my problem. I'm experiencing this with a few other font awesome icons as well. I'm designing pages in HTML / CSS in sublime. Then when I take this code into a Shopify store. The icons can't be seen. I've replicated this problem in multiple stores.
It's very strange. Can someone please help me.
You have the first icon inside a p-statement.
Maybe one of your CSS-files is changing the font.
Tried this one?
<i class="fa fa-check-circle fa_custom"></i> Verified <i class="fa fa-check"></i>
Related
Bonjour,
Trying to solve the audit point of discernable names of font awesome icons/elements using Lighthouse I dont't know how answer to this challenge : How To Make Font Awesome Elements Have Discernable Names ?
The actual result in Lighthouse ask for "Elements Have Discernable Names"
here is the basic code
<i class="fa fa-twitter black"></i>
Best regards
J.
Add the aria-label property to pass the audit.
<i class="fa fa-twitter black"></i>
More information about aria-label can be found at https://dev.opera.com/articles/ux-accessibility-aria-label/#accessible-name-calculation
I had tried to use handshake icons but it doesn't work, below included us the code which I have tried:
<i class="fa fa-handshake-o"></i>
Please help me
Try Your code in w3 school tryit editor
It is link for that https://www.w3schools.com/icons/fontawesome_icons_intro.asp
I think that You are not include the css for font-awesome so include that 'font-awesome.min.css'
This is the sample screen from try it editor
You need add the CSS files and the font files to make it work. Here is the documentation: http://fontawesome.io/get-started/
I had the same problem to add handshake icon
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-handshake-o fa-stack-1x fa-inverse"></i>
</span>
First time, it was not shown ever, but after updating the font-awesome fonts, and css to version 4.7, it works fine. Try to update your local versions of font-awesome fonts and css with latest version.
I've been scouring the web, and I can't find an answer to this. Is there away to add two Font Awesome icons in one i tag?
I can do it if I put two i tags side by side, like this:
Good for: <i class="fa fa-male fa-2x"></i><i class=" fa fa-female fa-2x"></i>
So is there anyway to do this?
Glyph-based fonts like this generally function by changing the content of the element to a specific value, which the font picks up and renders as the appropriate glyph.
So it's unlikely that you'll be able to use a single tag to display both of them unless the library provides specific syntax for handling that behavior on it's own (similar to how Font Awesome uses stacking).
This is not possible in a single <i> tag, reason is the way how the glyph identifying classes are applied. For longer or dynamic sequences you can however directly use the icons codes in markup notation:
html: <span class="font-awesome"></span>
css: .font-awesome { font-family: FontAwesome; }
This obviously requires that you load the font as FontAwesome.
I created a fiddler as simple demonstration: https://jsfiddle.net/6ofmn36g/
I do agree though that this is an approach that is somewhat hard to read, though...
With Font Awesome 5, it's possible!
Masking
Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new Power Transforms for some really awesome effects.
Go through the Masking section in this link.
The below snippet is a small working example taken from their site
<!-- Important : Use the SVG & JS method and reference the Js file, not the CSS file -->
<script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
<i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
</div>
Not possible with current library of FontAwesome. But there are work arounds as arkascha has suggested below.
Additional Info:
Not exactly what you are asking for But I think this will help you, Also future crowd who falls into this thread with the title.
I had answered similar stuff... Here
https://stackoverflow.com/a/36491858/2592042
You can also build a custom icon by using set of icons available in the font-awesome icon set by stacking and aligning them accordingly. Stacked Icons
Example:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-male fa-stack-1x"></i>
<i class="fa fa-female fa-stack"></i>
</span>
I'am using Font Awesone like this:
<link href=".../css/font-awesome.min.css" rel="stylesheet" type="text/css">
and
<span class="fa-stack fa-lg myownclass">
It works in IE, Chrome and Firefox - und sometimes in Opera. Now my customer told me, that he also not see the Icon on Firefox/Windows.
Do you have an idea what's the problem? Opera sometimes shows me the Icons, sometimes only rectangles or numbers.
Can you help me? Could it be a problem of caching?
All Font-Awesome icons need to be given the fa class in order to properly assign the Font-Awesome font:
<span class="fa fa-stack fa-lg myownclass">
^^
Unless this is being defined in your .myownclass class, the Font-Awesome font will not be active.
You have to add following on your html, head'
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/v4-shims.css">
First of all: checkout #James Donnely's answer: you definitely should add the fa class.
When you only see rectangles etc. it means that the browser didn't load the font file (considering sometimes you do actually see the fa-icons), and it's showing unknown character files (unicode characters like \f16c) as squares or something else, designating it doesn't know what the heck to do with those characters.
So whenever this happens open up a developer tools screen and check if you see any errors. Furthermore, be sure the font file is loaded from a stable server. Also, if you load the font-file from a relative path, it could be the case that on certain pages (eg. /blog/an-article) it can't find the file, while on others (/blog) the relative path is indeed correct.
thanks for your answers.
I changed the code to:
<span class="fa fa-stack fa-lg myclass">
<i class="fa fa-circle fa-stack-2x">
<i class="fa fa-facebook fa-stack-1x fa-inverse">
</span>
But there ar no changes, I cant understand. Perhaps it is realy only a problem of loading local the data. I give up for now.
My FontAwesome twitch icon isn't showing. It was completely fine before and now it just randomly disappeared. I haven't changed anything.
Here is my html code:
<div class="text-center center-block" style="margin-top:-40px;"><br/>
<h1>Follow us!</h1>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-google-plus-square fa-4x"></i>
<i class="fa fa-twitter-square fa-4x"></i>
<br/>
<i class="fa fa-steam-square fa-4x"></i>
<i class="fa fa-youtube-play fa-4x"></i>
<i class="fa fa-twitch fa-4x"></i>
</div>
I don't understand why it randomly disappeared. I have the latest Font Awesome and have included it in my header like so:
<link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/font-awesome-4.2.0/css/font-awesome.min.css">
All the other icons work completely fine. I can by the way still click on the twitch link but the icon is invisible. I also already tried clearing my cache and another browser.
On the Font Awesome page, in the Brand Icon's section, it says:
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.
I has the same problem and it was an outdated version of Font Awesome who was loading after the updated version
Well, this question is old and probably some of the answers, but for those that are using the new version of Font Awesome like v5 and having the same issues, the current version as at when I am writing this is v5.0.13.
Make sure that you set the CSS to font-weight:900
e.g.
i.fab {font-weight:900}
Please note that the font-weight is not bold but 900.
This worked for me!
For more info visit Troubleshooting Page for Font Awesome