I'm trying to add the styles sheet for font-awesome into a Codepen but seem to be getting nowhere, can anybody help please.
Codepen (https://codepen.io/kellett/pen/YreKaW)
Below is the styles sheet I've inserted in the top of HTML page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
It's working, you just are using the wrong font-awesome class.
Line 19 should be <span class="fa fa-search"></span>.
See this updated CodePen
Note: You can also add CDNs in the CodePen settings so you don't have to include it inline in your html.
simply add this http://static.fontawesome.com/css/fontawesome-app.css in css setting panel:
you are using wrong . Check this
<span class="fa fa-search"></span> use like this instead of <span class="fa-search"></span>.
Go to Settings on the top right-hand corner. Then paste the CDN code in the box that says "Stuff for <head>." Press Save and Close before adding your Font Awesome tags, which should be formatted like this:
<i class="fa fa-thumbs-up"></i>
Here's the CodePen. You should see a thumbs up icon on the bottom of the page:
https://codepen.io/calumchilds/pen/boLwVb
Hope this helps!
Add this link into js setting:
https://use.fontawesome.com/4d74086fc6.js.
Open settings.
On the Pen Settings modal, select the CSS tab
In the "Add External Stylesheets/Pens" section, search for font-awesome.
Related
Fontawesome-angular can be used via the following tag:
<fa-icon [icon]="['fal', 'info-circle']"></fa-icon>
In some cases - like the primeng accordion - the default icon can be replaced by setting css classes.
Is there a way to access the fontaweome svg images by providing the names as classes without the fa-icon tag?
Something like this:
<i class="fal fa-info-circle"></i>
Demo add this to index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I think there is a typo in the class name.. Try this..
<i class="fas fa-info-circle"></i>
I am working on a WordPress theme and tried many times to add fontawesome icons. Finally, by adding different fontawesome CSS files I found few of them works well but not others.
Please tell me why others do not work and which one should I use.
all.min.css file shows this result.
I have used the different to see which one works. "fa/far/fad/fas"
<div class="fa-3x">
<i class="fad fa-camera"></i>
<i class="fas fa-fire-alt"></i>
<i class="fa fa-bus-alt"></i>
<i class="far fa-fill-drip"></i>
</div>
And the functions.php file where I have added the CSS file to include in the header file.
...
//FontAwesome CSS file
wp_enqueue_style( 'epostlite-fontawesome', get_template_directory_uri() . '/fontawesome/css/all.min.css' );
...
I used version 5
Why "fad" and "far" shows a rectangle instead of the icon?
Why "fontawesome.min.css" and "brands.min.css do not work?
Why "fad" and "far" shows a rectangle instead of the icon?
Because fad & far are pro icons so both will not work in free version.
Why "fontawesome.min.css" and "brands.min.css do not work?
This both will work but you need to add one more css, which is
wp_enqueue_style('font-awesome-solid', get_template_directory_uri() . '/assets/css/font-awesome5/solid.min.css');
after adding solid.min.css you will get same result as all.min.css
But preferable is if you are using font awesome version 5 then just use all.min.css, no need to include all of them differently. you can check it from here.
Instead adding more & differrent kind of css you can fix the problem in less then 2 mins. Simple replacement of /font-awesome/5.13.0/css/fontawesome.min.css with /font-awesome/5.13.0/css/all.min.css and also font-awesome/5.13.0/js/fontawesome.min.js with /font-awesome/5.13.0/js/all.min.js can fix this issue. I prefer to use cdnjs
https://youtu.be/_GV_pEmLCLU
I'm using font awesome 5 on my websites. Let's say I miss-spell a icon like this:
<i class="fa fa-map-markerzzzz"></i>
Font Awesome code must detect that it's an unknown icon as it displays ? and ! symbols.
Any idea how I can listen in for this? I'd like to add error reporting. We've an error logging system, and I'd like to send an error to that for every broken icon.
Any ideas how to do that?
It's not so much that FontAwesome detects this, since it's a collection of CSS classes backed by a font file and not a piece of code. Therefore, unfortunately there is no error event that you can listen for.
A similar question has been asked before, though not for FontAwesome. It appears that your best bet would be to retrieve a list of existing FontAwesome classes, then compare those to the classes used in your code.
If you use Angular or React, you may be able to wrap the FontAwesome icons in a component and do the error checking there.
You can do something like this:
<style>
.fa:before {
content:"?"; /*if the content exist it will be replaced later, if not you will see this*/
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" >
<i class="fa fa-map-markerzzzz"></i>
<i class="fa fa-user"></i>
I am updating an Angular app to use Bootstrap 3 glyphicons instead of some images, and have run into the following difficulty:
I have this glyph in a view that's in my content section:
<i class="glyphicon glyphicon-play"></i>
and this one in a pull-down menu:
<i class="glyphicon glyphicon-log-out"></i>
It seems that when I pull down the menu, the "-play" glyph is not hidden and still shows through it.
I'm not 100% sure what the issue is without seeing more of your code, but you could add some quick jQuery to show/hide the appropriate icon on click.
$('.the-dropdown').on('click', function() {
$('i.glyphicon-play').hide();
});
For some reason the font-awesome social media icons refuse to show up on any browser. All other icons seem to work perfectly fine though... I've included a photo of the page opened in Mozilla with inspect element(linked due to no reputation). The only loaded css files are bootstrap and awesome-font.
It looks like you thought the text description of stacks was the class names. Icon stacks should look like this, there is no on class:
<span class="icon-stack">
<i class="icon-minus icon-stack-base"></i>
<i class="icon-camera icon-light"></i>
</span>
In your example, the second class overwrites the first class. This is because your using both classes on the same element, instead of stacking them.