Font Awesome is installed, and most icons work. Facebook and Twitter icons, however, do not.
I have tried changing the fa class to fab, and vice versa: neither work.
Here is the code. The top icon renders correctly:
info#site.org <i class="fas fa-envelope" style="margin-left: 5px"></i><br />
#site <i class="fab fa-twitter" style="margin-left: 5px"></i><br />
site <i class="fa fa-facebook" style="margin-left: 5px"></i>
Any suggestions on how to get the social icons working is greatly appreciated!
Fix: This was just a case of not having updated FontAwesome to the latest version, so the icon references were broken. Easy mistake! Hopefully this helps someone.
Icons work properly. Probably you made an error somewhere.
<i class="fab fa-3x fa-facebook"></i>
<i class="fab fa-3x fa-facebook-f"></i>
<i class="fab fa-3x fa-facebook-square"></i>
<i class="fab fa-3x fa-twitter"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>
Related
Hi guys this might be a silly question but i am trying to make my i class have a link to anthoer page but for some reason its not working
<ul class="get_in">
<li>
<i class="fa fa-facebook" </i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
</li>
</ul>
Again it might be silly but any help would be great , thanks x
<i class="fa fa-facebook"></i>
You can do either of this two
<i class="fa fa-facebook"></i>
or
<i class="fa fa-facebook"> </i>
But i will prefer to use the first one.
You have to finish your italic start tag with a > before you write your anchor start tag.
<i class="fa fa-facebook"> </i>
I have Font Awesome icons installed on this site. The icons size isn't increasing even after adding the class to increase size.
<ul class="stay-connected-inner list-inline">
<li><i class="fa fa-twitter fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-medium fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></li>
</ul>
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<ul class="stay-connected-inner list-inline">
<li><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-medium fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></li>
</ul>
font-awesome icons are texts. So use font-size to increase the size of font-awesome icons.
For eg.,
i {
font-size: 18px;
}
For font awesome icons sizing please check this link.
http://fontawesome.io/examples/
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
I had the same problem. For some reason the fa class is overriding the fa-2x class on the awesome font library. I found a blog that they knew it was an issue back in 2014 but haven't addressed it yet. On my site I added the style class again and added !important which fixed my problem.
<style>
.fa-2x{
font-size:2em !important;
};
</style>
use following inline css
<style type="text/css">
.fa-3{
font-size: 30px;
}
</style>
if you are using font awesome or font awesome pro icons in Angular 5+ using svg with Javascript. The easy way to increase your custom font size is:
.svg-inline--fa{
font-size:1.500em; //use your custom font size. If you do not want to apply the font awesome size classes
}
Apply this in your custom component to see the changes immediately.
In my case setting fa fa-5x, or font-size or height didn't help, but:
width: 20px !important; // 20px is an example value
Also be cautious if you have padding applied!
I am trying to create a link from some font-awesome icons within a span- and i-tag, however, this does not work. I am using the following code:
<a href="mailto:?subject=Test&body=Test">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
Try to change the version of stylesheet, Sometimes they do misbehave
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<a href="mailto:?subject=Test&body=Test">
<span class="fa fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
You may also try to change referencing to the minified version to uncompressed version. It will all depends.
your code is fine you need to add font-awesome.css file and font folder
Are you trying to layer all 3 of the icons?
I would like to only increase the width of the following icon:
<i class="fa fa-bars"></i>
I don't want to use things such as the following:
<i class="fa fa-bars fa-2x"></i>
<i class="fa fa-bars fa-3x"></i>
because the icons also increases in height.
Thanks and regards.
So I am new to web development and I am trying to link font awesome icons to my social profiles but am unsure of how to do that. I tried using an a href tag but it made all of the icons take me to one site instead of the one I wanted. Here is the code:
<i class="fa fa-dribbble fa-4x"></i>
<i class="fa fa-behance-square fa-4x"></i>
<i class="fa fa-linkedin-square fa-4x"></i>
<i class="fa fa-twitter-square fa-4x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
I'd like for each of these icons to go to their respective profiles. Any suggestions?
You can wrap those elements in anchor tag
like this
<i class="fa fa-dribbble fa-4x"></i>
<i class="fa fa-behance-square fa-4x"></i>
<i class="fa fa-linkedin-square fa-4x"></i>
<i class="fa fa-twitter-square fa-4x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
Note: Replace href="your link here" with your desired link e.g. href="https://www.stackoverflow.com".
If you don't want it to add it to a link, you can just enclose it within a span and that would work.
<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>
in your css, then you can:
#clickableAwesomeFont {
cursor: pointer
}
Then in java script, you can just add a click handler.
In cases where it's actually not a link, I think this is much cleaner and using a link would be changing its semantics and abusing its meaning.
Using bootstrap with font awesome.
<a class="btn btn-large btn-primary logout" href="#">
<i class="fa fa-sign-out" aria-hidden="true">Logout</i>
</a>
I found this worked best for my usecase:
<i class="btn btn-light fa fa-dribbble fa-4x" href="#"></i>
<i class="btn btn-light fa fa-behance-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-linkedin-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-twitter-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-facebook-square fa-4x" href="#"></i>
Please use Like below.
<a style="cursor: pointer" **(click)="yourFunctionComponent()"** >
<i class="fa fa-dribbble fa-4x"></i>
</a>
The above can be used so that the fa icon will be shown and also on
the click function you could write your logic.
In your css add a class:
.fa-clickable {
cursor:pointer;
outline:none;
}
Then add the class to the clickable fontawesome icons (also an id so you can differentiate the clicks):
<i class="fa fa-dribbble fa-4x fa-clickable" id="epd-dribble"></i>
<i class="fa fa-behance-square fa-4x fa-clickable" id="epd-behance"></i>
<i class="fa fa-linkedin-square fa-4x fa-clickable" id="epd-linkedin"></i>
<i class="fa fa-twitter-square fa-4x fa-clickable" id="epd-twitter"></i>
<i class="fa fa-facebook-square fa-4x fa-clickable" id="epd-facebook"></i>
Then add a handler in your jQuery
$(document).on("click", "i", function(){
switch (this.id) {
case "epd-dribble":
// do stuff
break;
// add additional cases
}
});
<i class="fab fa-facebook-square"></i>
<i class="fab fa-twitter-square"></i>
<i class="fas fa-basketball-ball"></i>
<i class="fab fa-google-plus-square"></i>
All you have to do is wrap your font-awesome icon link in your HTML
with an anchor tag.
Following this format:
<font-awesome icon code>
Simply add font awesome icons into the anchor tag and then change the anchor color in CSS.
Here is an example:
HTML CODE
<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-linkedin fa-4x"
id="social-icons-linkedin"></i></a>
<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-facebook fa-4x"
id="social-icons-facebook"></i></a>
<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fab fa-twitter fa-4x"
id="social-icons-twitter"></i></a>
<a class="icons-default" href="" target="_blank"><i class="social-icons social-icon fas fa-envelope fa-4x"
id="social-icons-mail"></i></a>
CSS
Let's change the default color to black.
.icons-default{color: black;}