Text inside fa-icon - html

How to add a text inside the icon using fa icon?
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<i class="fa fa-circle-o" aria-hidden="true">1</i>
How to add the number 1 inside the icon?

First you should add this script into your head:
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
then you can use icons like this:
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bookmark"></i>
<i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
</div>
Then you should have those icons as result:
reference Layering, Text, and Counters | Font Awesome

Related

Font awesome icons not aligning correctly

I have these div below taht have a font swesome icon with a circle around them. But they aren't aligned correclty as the width aren't the same, so the text isn't vertically aligned.
Can this be fixed, I remember some class that I could use to fix it, but don't remember the class name.
.circle-icon {
background: #e3f4f6;
padding: 10px;
border-radius: 50%;
}
<div>
<span><i class="fa fa-user fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Like<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
<span><i class="fa fa-star fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Review<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
<span><i class="fa fa-check fa-lg rating-color mr-2 circle-icon" aria-hidden="true"></i></span> <span>Verified</span>
</div>
Use stacking icons: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
.fa-circle {
color: #e3f4f6;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
</span>
<span>10 Likes</span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>
Works also with the CSS version:
.fa-circle {
color: #e3f4f6;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
</span>
<span>10 Likes</span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>
You can simply use the width atribute and give every cricle-icon the same width.

FontAwesome icon fa-plus not visible

I tried to add FontAwesome icon "fa-plus", but it is not showing.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class="table-add float-right mb-3 mr-2"><i
class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
You're making a mistake there. You need to remove the extra anchor closing tag for it to work. Good luck.
Your HTMLhave errors: (two "< /a>")
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success">
</a>
<i class="fas fa-plus fa-2x" aria-hidden="true"></i>
</a>
</span>
Replace with this:
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success">
<i class="fas fa-plus fa-2x" aria-hidden="true"></i>
To add font awesome + icon, use "fa fa-plus"
For Example :
class="fa fa-plus"

Fill a FontAwesome icon [duplicate]

This question already has answers here:
Font Awesome Background color
(6 answers)
how to stylize a circle Fontawesome icon background?
(3 answers)
Closed 5 years ago.
I'm trying to fill the times-circle icon from FontAwesome which is transparent inside.
<i class="fa fa-times-circle fa-lg" aria-hidden="true"></i>
So I tried to apply a background-color: white to this element but since the element is squared I have a squared background. I also tried to apply a border-radius: 100% to obtain a rounded element but nothing...
So my question is how to fill the cross inside this icon ?
Thanks.
http://fontawesome.io/examples/#stacked
Stack your icons using the fa-stack class and fa-stack-Nx classes for your icons:
.fa-stack .fa-circle{
color: fuchsia;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
More examples:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

FontAwesome Stack Replace on Hover

So I've been trying to do a quick animation that replaces an entire span on hover but I can't seem to get it to work. How should I approach going about replacing a span on hover?
<h1>I need this replaced...</h1>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<h1>to this</h1>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<h1>on hover</h1>
Sample CodePen here.
By changing the :before css properties for the twitter on hover you can achieve the output.
span.fa-stack:hover i.fa-twitter:before{content:"\f024"; color:#fff}
span.fa-stack:hover i.fa-square-o:before{content:"\f111"}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1>I need this replaced...</h1>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
You can achieve this in CSS by combining the :hover and :first-child/:last-child CSS selectors.
.fa-stack.fa-lg:hover :first-child:before {
content: "\f111";
}
.fa-stack.fa-lg:hover :last-child:before {
content: "\f024";
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>

Want to make Font Awesome icons clickable

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;}